面试官：tree-shaking的原理是什么？
前言 在前端面试的过程中， 一直是考察面试者能力的一个重点，而在我们常用的项目打包工具中，无论是 还是 ，都具备一项很强大的能力—— ，所以面试官也常常会问到 的原理是什么，这时我们该如何回答呢？其实核心原理就是 。 在前端开发中，其实 的应用有很多，比如我们前端项目的打包工具 、代码检查工具 ，代码转换工具 都依赖了 的语法分析和转换能力。 AST简单介绍 是 的缩写，这玩意儿的全称叫 ，它可以用来描述我们代码的 。 举个例子： 我这...
useEffect依赖引用类型
如果你是一个入行不久的前端开发，面试中多半会遇到一个问题： 你认为使用React要注意些什么？ 这个问题意在考察你对React的使用深度，因为沉浸式地写过一个项目就会发现，不同于一些替你做决定的框架，“潜规则”丰富的React远比看上去要难相处。 React中主要有两类坑点，一种是让你措手不及，结果对不上预期，严重影响开发进度，另一种更为头痛，表面风平浪静，水下暗流涌动。 官方文档的触角只伸到Demo级别，并不涉及花样百出的最差实践，所...
Web Worker：JS多线程的伪解药💊?
前言 在前端开发领域，JavaScript 的单线程限制一直是一个难以忽视的挑战。当谈到解决JavaScript的单线程限制时，HTML5引入的Web Worker被普遍认为是一剂解药💊。同时，业界中大量的文章也是聚焦于讨论web worker的神奇力量。然而，本文将另辟蹊径，和您一同探索Web Worker神秘的另一面。 js单线程限制及多线程能力的需求 js的一大特点就是单线程。对于单线程，一句最经典的概述就是“同一时间只能执行一...
Blob的几个使用场景
前言 说起 对于一部分人来说会很陌生，因为没有接触过，包括我之前也没有接触过,后来一个功能的实现才有机会接触 ,现在来学习一下 的使用场景。后面有代码仓库地址 正文 什么是Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 来用于数据操作。 创建一个Blob对象 array 是一个由 , , , 等对象构成的 ，或者其他类似对象的混合体，它将会被放进 。DOMStrings 会被编...
虚拟列表 or 时间分片
最近在做一个官网，原本接口做的都是分页的，但是客户提出不要分页，之前看过虚拟列表这个东西，所以进行一下了解。 为啥要用虚拟列表呢！ 在日常工作中，所要渲染的也不单单只是一个li那么简单，会有很多嵌套在里面。但数据量过多，同时渲染式，会在 渲染样式 跟 布局计算上花费太多时间，体验感不好，那你说要不要优化嘛，不是你被优化就是你优化它。 进入正题，啥是虚拟列表？ 可以这么理解，根据你视图能显示多少就先渲染多少，对看不到的地方采取不渲染或者部...
音频可视化-简单实现
离职的第一天，刷到了一个音频可视化的帖子，简单的学习了一下来跟大家分享一下我的学习成果。第一次写帖子大家望大家多指点 理解 首先音频处理需要跟多环节例如修音、混响等，每一个环节就是一个节点，每一个环节都有一个音频的源节点，例如下图的首先获取一个音频源节点，第一个环节去处理他的音色，在下一步在新引入一个音频源节点例如鼓点，节拍之类的在第二个环节添加进去最后通过输出设备播放出来就此完成了整个流程，节点的数量是可以任意数量的。 音频上下文就是...
js闭包的6种应用场景！！！这下会用了
闭包的基本定义 如果一个函数访问了此函数的父级及父级以上的作用域变量，那么这个函数就是一个闭包 。闭包会创建一个包含外部函数作用域变量的环境，并将其保存在内存中，这意味着，即使外部函数已经执行完毕，闭包仍然可以访问和使用外部函数的变量。 闭包的优缺点及特性 闭包的优点 ： 1. 保护变量 ：闭包可以将变量封装在函数内部，避免全局污染，保护变量不被外部访问和修改。 2. 延长变量生命周期 ：闭包使得函数内部的变量在函数执行完后仍然存在，可...
webstorm debugger断点调试React前端项目教程
在日常开发 React 前端项目时，如果想调试前端 js 代码，我们一般都会在代码中插入 语句，通过在 Chrome 输出日志的方式进行查看。或者在 Chrome 的 source 中查找到目标代码片段，进行打点调试。这样调试的方式效率都比较低下，如果能在我们的本地 IDE 中进行断点调试前端代码，那么效率将会显著提高。 我们先看一下最终的调试效果： Webtsrom 中的断点及 debug 情况 Chrome 中实时运行情况 操作步骤...
从零开发前端 CLI 脚手架
前言 在现代前端开发中，CLI（Command Line Interface）脚手架已经成为提高开发效率、规范团队协作的重要工具之一。本文将介绍如何从零开始开发一个前端 CLI 脚手架，使其能够通过命令行交互生成不同技术栈的模板代码，并预装常用的工具如 ESLint、Husky、Prettier 等，从而为项目的开发提供一致性和高质量的基础。 项目结构 首先，我们需要确定脚手架的项目结构。一个典型的结构可以包括以下目录和文件： 核心功能...