前端性能优化指的是，通过各种技术手段，提高网页的加载速度，渲染速度，交互响应速度，减少资源占用，提高用户体验。 按照测量在先，优化在后的原则，我将从以下几个方面进行分析： 1. 性能检测 2. 网络请求优化 3. 资源加载优化 4. 代码与架构优化 5. 渲染性能优化 6. 感知体验优化 性能检测 1. 确立性能指标与目标：关注核心 Web 指标（Core Web Vitals）： - LCP（最...

前端性能优化

typescript 就是在 JavaScript 的基础上，增加了类型系统，让代码在编写的时候，就可以发现错误。通过丰富的配置项，使得类型检查的严格程度可以自定义。 type 是类型别名，通过&实现交叉类型，不支持声明合并，不可被类实现 interface 是接口，使用 extends 继承，支持声明合并，可被类实现 解决什么问题？ 将弱类型的 JavaScript，转向"强类型"。更强的约束提...

区分 type 和 interface

模块化开发指的是，在前端开发过程中，每个模块都是独立的单元，我们通过封装变量（如ESM的独立作用域），避免全局暴露，从而实现变量隔离避免全局污染。这样在代码修改时，可以更好的控制影响范围，且提高了复用性。 当前已有的实现包括 CommonJS，AMD，CMD，UMD，ESM 1. CommonJS 是同步加载的（适合服务器启动时做预处理），在 Node 环境下使用 2. AMD 异步加载（避免浏览...

模块化开发

单例模式 确保一个类只有一个实例，并提供全局访问点。保证了一个类只有一个实例。 解决了什么问题？ 保证全局唯一，避免数据状态混乱，节省资源。比如 modal 弹窗（只需要一个，最多替换里面的内容），比如文档编辑器示例（一个页面中只需要一个，允许操作这个示例），比如 Redux（只需要一个管理全局数据） 最佳实践： 1. ES6 导出的对象也是唯一的，无需手动实现单例 2. 实现的时候需要注意隐藏构...

设计模式

HTTP是超文本传输协议，HTTP1.1，HTTP2，HTTP3分别代表三个版本，可用于前后端数据通信。 升级后，优化了哪些功能？解决了哪些问题？ 1. HTTP1.1 时期，默认复用TCP连接（持久连接），请求必须按照顺序响应，会造成队头阻塞。浏览器最多支持 6 个 TCP 连接。重复传输了头部字段，无优先级控制。 2. 从 HTTP1.1，升级到 HTTP 2 后，通过二进制分帧和多路复用的能...

HTTP

2025 年终总结

从前端“手工作坊”到“现代工厂”：前端工程化核心实践与演进思考 当我们谈论前端工程化时，它描绘的是一幅从无序到有序，从个人技艺到系统工程的进化图谱。这如同建造摩天大楼，不仅需要一砖一瓦的匠心（编码能力），更需要科学的规划设计（规范与设计）、高效的供应链管理（依赖与构建）、严谨的施工流程（自动化与部署）以及持续的健康监测（监控与优化）。本文旨在系统梳理前端工程化的核心支柱，并分享如何在项目演进中持续...

聊聊前端工程化-AI版本

前端工程化是一个很大的词，就像让你去盖一栋楼，前期的规划设计，方案验证，再到原材料购买，协调人力，工期管理，验收交付等。可以发现前端开发从某种程度上来说，跟你去盖楼没啥本质区别，有时候你可能是需要盖一栋新楼（从 0 到 1 的新需求），而有时候你可能是需要在盖了一半的楼上继续施工（基于已有项目，再开发新功能），你也可能被安排去修修电路，管道啥的（修复一个已有问题）。 那么具体到前端工程化，有哪些我...

聊聊前端工程化-人工版本

在公司真正的商业项目中，当前使用的都是 webpack,而我自己搞 demo 之类的，会更偏向于 vite 这种开箱即用的。那么这两个打包工具，究竟有哪些差异？我们在不同的场景下又应该如何抉择呢？ 一句话结论：如果没有企业级高复杂度打包定制需求，请直接选用 vite。 接下来我们再讨论几个细节： 它们的核心实现原理？webpack 是构建时打包（bundle-based），而 vite 是基于原生...

webpack对比vite

React 事件是什么？ React 事件是 React 框架对于浏览器原生事件的一层封装，称为合成事件，相当于一个事件综合处理系统。在页面上点击一个按钮时，浏览器会产生一个原生的事件，React 并不会给每一个按钮都加一个单独的监听器，而是在整个组件树的顶部（根 DOM 节点）设立一个调度中心。事件会冒泡到顶部，React 随后会创建一个合成事件对象，这个对象抹平了不同编辑器之间的差异，提供了一...

React事件

loader 是什么？ 是一个文件处理器 为什么需要 loader？ webpack本身只能处理 js 文件，而通过 loader 可以让 webpack 处理非 js 的文件（比如图片，css等），把它们变成可以识别和打包的模块。 它是如何工作的？ 1. 匹配文件：在配置中定义规则（如 test: /\.css$/），指定哪些文件由 loader 处理。 2. ​转换内容​：loader 是函数...

webpack中的loader

async/await 是什么？ "async/await 是 JavaScript 处理异步操作（如网络请求、文件读取）的"语法糖"，它让我们能用写同步代码的方式写异步逻辑，避免层层嵌套的回调函数。 底层依赖 Generator 的暂停/恢复机制和 Promise 的状态管理，async 函数总返回 Promise，即使内部返回普通值也会被自动包装为 Promise.resolve(value)...

Async/Await

什么是 Promise ? Promise 是 es6 提出的处理异步任务的"承诺容器"。它只有三个状态 pending，fulfilled，rejected，状态一旦从 pending 变成后面两个，就不会再发生变化了，支持链式调用，通过.then() 方法，可以将异步任务的结果参数传递下去，实现了更好的异步任务执行控制和错误处理。 为什么要有 Promise？解决了什么问题？ 在 Promis...

Promise

前端路由是什么？ 前端路由能让浏览器不重新加载整个页面的条件下，通过改变 url 展示不同的组件，从而实现页面跳转的全前端（JavaScript）控制，是 SPA 的基础 为什么要有前端路由？ 1. 传统后端路由，在跳转后会先白屏，等接口重新返回 html 后，才能正常展示，前端路由可以实现"无缝切换" 2. 降低了服务端压力，无需每个页面都重新请求页面资源(CSS/JS) 3. 支持复杂应用交互...

前端路由

对于某一类特定的需求，过于原子化的组件化开发方式并不能够彻底地解决开发效率问题，从抽象的业务需求中能够具象出较为通用的可插拔可组合的技术方案才是解决实际问题的终极答案。 下面给出几个常见场景 页面布局方案 1. 布局与路由的结合。如何实现不同路由不同布局？将布局组件作为传入不同的页面组件上 2. 页眉：应用层页眉（数据传递给外面，不接收外层传入的数据），页面层页眉（数据从外层传入） 3. 在企业管...

关于前端项目的思考

key 是什么？ 是一个特殊属性，主要针对列表，map 后的 react 组件，以及相邻的同类型 DOM，需要手动指定 key，帮助 react 做区分 为什么要有 key？ 1. React Diff 算法的需要。如果修改数组，没有指定 key 时，React 的 Diff 算法（优先通过 key 匹配），只能退化为按索引顺序对比。 2. 提升性能，比如说我在列表的开头新增了一个元素，如果不指定...

React中的key

1. 在单次渲染的范围内，props和state始终保持不变，可以看成固定值，在任何地方读取都是一样的（Capture Value） 2. React只会在浏览器绘制后运行effects。这使得你的应用更流畅因为大多数effects并不会阻塞屏幕的更新。Effect的清除同样被延迟了。上一次的effect会在重新渲染后被清除。 3. useEffect 里的 return，清理的也是当前渲染的这一...

React中的useEffect

先介绍两个概念 - 状态共位：将状态尽可能放置在离其使用位置最近的组件中。从而减少不必要的渲染和 props 传递，简化组件结构，提高可维护性。适用于状态仅被单个或少数几个组件使用的场景 - 状态提升：将共享状态提升到共同的祖先组件中。实现多个组件之间状态共享，父组件通过 props 向下传递数据和回调函数。使用于状态被多个兄弟组件所需要时。 一句话总结：共置状态 -> 提升状态 -> 组件组合 ...

React中的数据存在哪里？

四点建议： 1. 一开始不要过度考虑组件的扩展性。如果在一开始就把各种情况都考虑到，会导致组件核心功能不清晰，为了实现各个 props，可能会导致代码存在很多的逻辑判断 2. 如果为了高扩展性设计，可以考虑更多使用 props.children 插槽的方式，让外界更自由的使用。而组件只关心自己的核心功能。如果是为了让用户即插即用，可能确实需要支持更多的 props。 3. 关注传入 props 的...

React组件如何设计？

1. 在需求设计阶段打好地基，明确模块的单一职责，避免功能混杂，预判扩展性，安全性和对性能造成的影响 2. 在业务迭代中，定期重构冗余代码，进一步抽象逻辑，将页面拆分为更独立的组件。注意在重构过程中，通过自动化用例测试避免引入新的问题 3. 强化错误定位能力，通过归档生产环境 SourceMap ，提高定位线上问题的效率 4. 通过性能检测平台监测关键指标（页面响应速度，操作响应时间），及时发现错...

前端代码可维护性提升

HTTP缓存，当浏览器访问一个网站时，会把页面上的图片，css 数据下载到本地，当用户下次再访问这个页面时，浏览器就可以直接读取本地副本，避免重复加载。主要分为强缓存和协商缓存，可以用来减少网络请求，提高用户体验。 怎么做到的？ 1. 浏览器发出 GET 请求后，先看下是否存在强缓存？ 2. 如果强缓存有效，则直接读取浏览器本地缓存 200 from cache 3. 如果强缓存失效，则考虑协商缓...

HTTP缓存

事件循环是浏览器协调任务执行的机制，因为浏览器是单线程的，为了避免耗时任务卡住主线程，所以它把任务分成了 4 类 1. 同步任务：需要立即执行的任务，会阻塞后续代码，直到其完成，可能会阻塞主线程，比如 console.log() 2. 异步任务：不需要立即执行的任务，执行完成后需要通知主线程的，异步任务又分为宏任务和微任务。 3. 宏任务：优先级更低的异步任务，不会阻塞主线程。包括整体  脚本的加...

事件循环

在 JavaScript 中，存在一些异步操作，需要等浏览器执行完成之后，再告诉主线程，我们再去做后续的操作 之前为了实现这一点，我们会用回调函数的方式，拿到异步的执行结果，并做后续处理 但如果我们在某一个回调函数中，又依赖其他回调函数带过来的参数，就会存在回调地狱（混乱的嵌套），且难以维护和控制状态，由此 es6 引入了 Promise 的概念。一个 Promise 本身只有三种状态，pendi...

异步编程

localStorage：浏览器前端本地缓存，当页面关闭的时候，不会自动清空，可以存 5MB，且共享给其他标签一起使用 sessionStorage：会话级别的浏览器前端本地缓存，当会话关闭的时候（tab 页关闭），自动清空，且不共享给其他标签 cookie：前后端都可以使用的缓存，一般用来存储鉴权信息，或者用于分析用户习惯的相关数据，可以通过多个属性控制它（比如允许使用的接口域名/path 控制...

浏览器缓存

什么是节流/防抖？防抖是延迟执行最后一次，节流是固定频率执行 1. 防抖：当用户在某一个时间段内，连续触发时，只在最后实际执行一次。比如我给表单的提交按钮，加了 1s 防抖，则用户如果在 1s 内点了 10 次，我也只在最后触发一次回调事件 2. 节流：当用户在某一个时间段内，连续触发时，限定它的触发频率。比如我给 scroll 监听事件加了 1s 节流，则用户在页面滚动过程中，不管他滚动的多快（...

节流防抖

浏览器的重绘重排，指的是当 DOM 和 CSSOM 被修改后，可能会重新触发浏览器渲染的关键路径和。 1. 重排：当 DOM 元素的变化影响了它的几何属性（大小，位置，布局），浏览器需要重新计算元素的几何属性，并重新构建文档树的全部或部分过程 2. 重绘：当 DOM 元素属性的变化不影响它在文档流中的位置和大小时，浏览器需要重新绘制元素外观。    重排必定导致重绘，因为布局变化后需要重新绘制。而...

重排重绘

接下来将会更新一系列文章，每篇文章将会聚焦一个概念，从以下四个角度回答问题：是什么？如何创建（使用）？解决了什么问题？最佳实践有哪些？这是系列的第一篇，关于 BFC。 BFC 是什么？ BFC 全称是（Block-Formatting-Context）块级格式化上下文，BFC内部的块级盒子会在垂直方向上一个接一个地放置，属于同一个BFC的两个相邻Box的垂直margin会发生重叠。BFC就是页面上...

BFC（Block-Formatting-Context）-块级格式化上下文

这篇我们来关注浏览器跨域 浏览器跨域是什么？ 跨域请求拦截是浏览器为了请求安全引入的基于同源策略实现的安全特性，当用户在一个页面上（baidu.com）尝试请求另一个来源的数据(api.baidu.com)时，如果协议、域名、端口号任意不同，守卫就会拦截请求 如何触发浏览器跨域？ 当发出请求的协议，域名，端口号任意一个跟当前页面不一致时，则会出现跨域请求拦截。 浏览器跨域有什么用？ 同源策略限制了...

浏览器跨域

这篇我们来关注闭包 什么是闭包？ 闭包是由函数和它所在词法环境组合而成的实体，这个环境包含了闭包创建时，所能访问的所有局部变量。所以当外部函数已经执行完后，依然可以通过闭包（内部函数）访问到当时词法环境的变量。 如何创建闭包： 1. 存在函数嵌套（在外部函数中，再定义一个内部函数） 2. 内部函数使用了外部函数中的变量 3. 内部函数被导出，包括三种场景：(1)直接将内部函数作为返回值；(2)作为...

闭包

The design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. I have learned some design patterns in the past, but I don't think I have ...

Design Pattern - Simple Factory Pattern

The error message displayed in my terminal was as follows: <tsconfigRootDir>/src\xxx.tsxparserOptions.project I tried to fix it by following the steps in the error message, but it didn't work. Then I ...

Debugging a Mysterious ESLint Error

使用 JavaScript 检查文件是否为 JFIF 格式的方法，通过读取文件头部的 JFIF 签名来验证图像格式

Check whether the file is in .jif format.

One way to convert the React SVG component into a real DOM element and then into a Base64 URL

Convert the React SVG component into a Base64 URL

One way to get base64 png url from a img dom

Get Img Dom Base64 Png Url

Independent Module Url Processing For New Worker()

react-hook use  with  to reduce unnecessary child-component re-render use  and wrap child components in  to share data between components without passing data by props. use  with  to improve user expe...

All Posts

前端性能优化

区分 type 和 interface

模块化开发

设计模式

HTTP