前端常用的性能实用优化方法有哪些?

前端项目的性能优化从来不是一道单一的选择题，而是一个需要从多个维度综合考量的系统工程。下面这份清单，横向覆盖了移动端、图片、Ja vaScript、CSS、HTML、页面内容、服务器和Cookie等几个主要方向，希望能帮你建立起一个比较完整的优化框架。

移动端性能优化

• 保持单个文件小于25KB
  移动网络环境下，大文件会直接拖慢页面加载速度，这是个硬道理。
• 打包内容为分段multipart文档
  HTTP请求每次都要经历三次握手，耗时不少。用multipart方式可以把多个组件打包进一个请求，大幅减少握手次数。

图片优化

1. CSS Sprites（雪碧图）

把多张小图合并成一张大图，通过CSS的background属性来定位显示。这样做既减少了HTTP请求，也节省了图片总字节数，还省去了给每张小图命名的麻烦。

2. 压缩图片

图片往往是页面体积的“大头”。尽量选择合适的格式和尺寸，然后用工具（比如智图）做压缩。同时在代码里用srcset按需加载不同分辨率的图片。切记不要过度压缩，否则图片会模糊得没法看。

3. 尽量避免重设图片大小

在页面、CSS或Ja vaScript中反复重置图片尺寸，会触发多次重绘，对性能影响明显。一次到位比多次矫正要高效得多。

4. 尽量避免使用DataURL

DataURL没有经过图片压缩算法，体积会变大，而且需要解码后再渲染，加载慢、耗时长。除非是极小的图标，否则谨慎使用。

5. 图片懒加载

如果一个页面有上百张图，而用户只看到前几张，那后面的图完全可以晚点再加载。懒加载是提升首屏速度和减少带宽浪费的利器。

Ja vaScript相关优化

1. 把脚本放在页面底部

JS加载会阻塞DOM解析，放在底部可以保证页面内容先展示出来。

2. 使用外部Ja vaScript和CSS

外部文件可以被浏览器缓存，而内联代码每次请求HTML都会重新下载。把JS和CSS放到外部文件里，既减小了HTML体积，又能利用缓存提升后续访问速度。

3. 压缩Ja vaScript和CSS

压缩文件能降低网络传输量，减小响应时间。现在的构建工具基本都内置了这个功能。

4. 减少DOM操作

操作DOM会触发布局（layout）和绘制（paint），这是渲染性能的两大瓶颈。能用变量缓存的就别每次都去查DOM。

5. 缩短JS解析时间

JS的开销包括加载、解析编译和执行三个环节。可以从这几个方向入手：

• 代码拆分，按需加载
• Tree Shaking，去掉无用代码
• 避免长任务阻塞主线程
• 利用requestAnimationFrame和requestIdleCallback做时间调度

6. V8编译原理（代码优化）

JS代码会先解析成抽象语法树，再转成字节码，最后变成机器码。编译过程中引擎会做优化，但运行时也可能发生反优化。了解这个过程有助于写出更“友好”的代码。

7. V8内部优化机制

• 脚本流：边下载边解析，不等待全部下载完再开始解析。
• 字节码缓存：常用的字节码会被缓存起来，后续复用。
• 函数懒解析：只解析当前用到的函数，减少初始加载成本。

8. 对象优化（迎合V8）

• 保证对象属性初始化顺序一致（V8会生成隐藏类以便后续复用）。
• 不要直接给对象追加新属性（追加的属性需要通过描述数组间接查找，效率低）。
• 优先使用数组代替类数组，因为V8对数组有专门的优化。如果遇到类数组，先转换成数组再操作。
• 避免数组读取越界——比如for循环多查了一个下标，性能可能相差6倍。

9. 避免undefined与数字比较

数组也是对象，当找不到对应下标时会沿着原型链向上查找，造成额外开销，而且业务上通常没有意义。

10. 避免内存泄漏

Ja vaScript的垃圾回收机制主要靠引用计数和标记清除。但循环引用、意外的全局变量、闭包中未被释放的引用、以及脱离DOM但仍有JS引用的元素，都可能导致内存泄漏。React中特别设计了ref API来管理DOM引用，就是出于这个考虑。

CSS相关优化

• 把样式表放在中：这样可以避免浏览器先渲染无样式的内容，再重新构建渲染树，减少一次布局和绘制。
• 使用替代@import：@import会阻塞并行下载。
• 不要使用filter：filter属性会导致性能开销，尤其在现代浏览器中依然不推荐大量使用。
• 避免元素类型混用：数组中放多种类型不利于V8引擎优化。
• 降低CSS对渲染的阻塞：按需加载关键CSS，非关键CSS可以异步加载。
• 利用GPU完成动画：通过transform和opacity等属性触发合成层，减少重绘。
• 使用contain属性：例如contain: layout告诉浏览器该元素内部布局变化不影响外部，可以独立优化。
• 使用font-display优化字体加载：让文字更早显示，减轻闪动问题。

HTML相关优化

• 减少iframe的使用（每个iframe都会增加额外资源开销）
• 压缩空白符（减少传输体积）
• 避免嵌套层次过深（影响解析和渲染效率）
• 避免使用table布局（table的渲染机制比较低效）
• 减少没有必要的注释
• 删除元素的默认属性（比如checked="checked"等，没必要的就省掉）

页面内容与请求优化

• 减少HTTP请求数（合并文件、雪碧图等）
• 减少DNS重定向
• 缓存Ajax请求（对于重复数据避免重复请求）
• 延迟加载（非首屏内容稍后再加载）
• 预加载（提前加载即将用到的资源）
• 减少DOM元素的数量（DOM越多，渲染越慢）
• 将内容划分到不同域名（利用浏览器对同一域名并发连接数的限制，适当分散请求）
• 尽量减少iframe的使用
• 避免404错误（每个404都会浪费请求资源）

服务器相关优化

• 使用CDN：将静态资源部署到离用户最近的节点，大幅降低延迟。
• 添加Expires或Cache-Control响应头：充分利用浏览器缓存。
• 启用Gzip：服务器端压缩，客户端解压，能有效减小传输体积。
• 配置Etag：配合缓存策略做条件请求，减少不必要的重新下载。
• 尽早输出缓冲：比如用Flush技术让页面头部先到达浏览器。
• Ajax请求使用GET方法：GET请求可以被缓存，POST不行。
• 避免图片src为空：空src会导致浏览器发起不必要的请求。
• Keep-Alive（持久TCP连接）：设置keepalive_requests和keepalive_timeout，复用连接减少握手。
• HTTP缓存策略：推荐使用no-cache配合服务器端Etag验证，既保证新鲜度又能利用缓存。
• Service Workers：不仅能加速重复访问，还能实现离线支持。

Cookie相关优化

• 减少cookie大小：每次请求都会带上cookie，体积越大越耗带宽。
• 静态资源使用无cookie域名：把图片、CSS、JS等静态资源放在另一个域名下（且该域名不设置cookie），可以避免不必要的cookie传输。

首屏加载优化

• 资源压缩、传输压缩、代码拆分、Tree Shaking、HTTP缓存
• 路由懒加载、预渲染、内联关键CSS、虚拟列表
• 使用prefetch和preload调整资源加载顺序
• JS内存管理（避免内存泄漏以保持长期流畅）