如何提高前端应用的性能？

2025-05-19 69 阅读6分钟

1. 减少 HTTP 请求

合并文件：将多个 CSS 或 JavaScript 文件合并为一个文件，减少请求次数。
使用 CSS Sprites：将多个小图标合并为一张大图，通过 background-position 来显示不同的图标。
使用 Base64 编码：将小图片转换为 Base64 编码，直接嵌入到 CSS 或 HTML 中，减少图片请求。

2. 优化资源加载

异步加载 JavaScript：使用 async 或 defer 属性来异步加载 JavaScript 文件，避免阻塞页面渲染。
延迟加载图片：使用 loading="lazy" 属性来延迟加载图片，只有当图片进入视口时才加载。
使用 CDN：将静态资源托管到 CDN 上，利用 CDN 的分布式节点加速资源加载。

3. 优化 JavaScript 代码

减少 DOM 操作：频繁的 DOM 操作会导致页面重绘和回流，尽量将多次操作合并为一次。
使用事件委托：将事件监听器绑定到父元素上，利用事件冒泡机制处理子元素的事件，减少事件监听器的数量。
避免全局变量：全局变量会占用内存，尽量使用局部变量或模块化开发来减少全局变量的使用。

4. 优化 CSS 代码

减少选择器复杂度：复杂的选择器会增加样式匹配的时间，尽量使用简单的选择器。
避免使用 @import：@import 会阻塞页面渲染，尽量使用 <link> 标签来加载 CSS 文件。
使用 will-change 属性：提前告知浏览器哪些元素将会发生变化，优化渲染性能。

5. 优化图片资源

压缩图片：使用工具如 ImageOptim 或 TinyPNG 来压缩图片，减少图片文件大小。
使用 WebP 格式：WebP 格式的图片比 JPEG 和 PNG 更小，且支持透明度和动画。
响应式图片：使用 srcset 和 sizes 属性来根据设备屏幕大小加载不同尺寸的图片。

6. 使用缓存

浏览器缓存：通过设置 HTTP 头中的 Cache-Control 和 Expires 字段来缓存静态资源，减少重复请求。
Service Worker：使用 Service Worker 来实现离线缓存和资源预加载，提升页面加载速度。
LocalStorage 和 SessionStorage：将不经常变化的数据存储在 LocalStorage 或 SessionStorage 中，减少服务器请求。

7. 优化网络请求

使用 HTTP/2：HTTP/2 支持多路复用和头部压缩，可以显著减少网络请求的延迟。
减少重定向：过多的重定向会增加页面加载时间，尽量减少不必要的重定向。
使用 Gzip 压缩：通过 Gzip 压缩 HTML、CSS 和 JavaScript 文件，减少文件大小，加快传输速度。

8. 优化渲染性能

减少重绘和回流：避免频繁修改 DOM 样式，尽量使用 transform 和 opacity 等不会触发回流的属性。
使用 requestAnimationFrame：在动画中使用 requestAnimationFrame 来优化渲染性能，避免卡顿。
使用虚拟 DOM：在大型应用中使用虚拟 DOM 来减少直接操作真实 DOM 的次数，提升渲染性能。

9. 使用性能分析工具

Lighthouse：使用 Chrome 的 Lighthouse 工具来检测页面性能，并给出优化建议。
WebPageTest：使用 WebPageTest 工具来测试页面加载速度，并分析性能瓶颈。
Chrome DevTools：使用 Chrome DevTools 中的 Performance 面板来分析页面渲染性能，找出性能瓶颈。

10. 代码分割与懒加载

代码分割：使用 Webpack 的 SplitChunksPlugin 将代码分割成多个小块，按需加载。
懒加载：使用 React.lazy 或 Vue 的异步组件来实现路由和组件的懒加载，减少初始加载时间。

11. 使用 Web Workers

后台任务：将耗时的计算任务放到 Web Workers 中执行，避免阻塞主线程。
并行处理：利用 Web Workers 的并行处理能力，提升复杂计算的性能。

12. 优化字体加载

字体子集化：只加载需要的字符集，减少字体文件大小。
使用 font-display：通过 font-display 属性控制字体加载时的显示行为，避免页面空白。
预加载字体：使用 <link rel="preload"> 提前加载字体文件，避免字体加载延迟。

13. 使用 PWA 技术

离线访问：通过 Service Worker 实现离线访问，提升用户体验。
添加到主屏幕：通过 PWA 的 manifest.json 文件，允许用户将应用添加到主屏幕，提升用户留存率。
推送通知：使用 PWA 的推送通知功能，提升用户参与度。

14. 优化第三方脚本

异步加载：将第三方脚本设置为异步加载，避免阻塞页面渲染。
延迟加载：将非关键的第三方脚本延迟到页面加载完成后再加载。
使用 Intersection Observer：通过 Intersection Observer 来延迟加载第三方脚本，直到它们进入视口。

15. 使用现代前端框架

React/Vue/Angular：使用现代前端框架来提升开发效率和性能，框架内部已经做了很多性能优化。
SSR/SSG：使用服务器端渲染（SSR）或静态站点生成（SSG）来提升首屏加载速度。
虚拟列表：在长列表中使用虚拟列表技术，只渲染可见区域的内容，提升渲染性能。

16. 优化动画性能

使用 CSS 动画：尽量使用 CSS 动画而不是 JavaScript 动画，CSS 动画性能更好。
使用 transform 和 opacity：使用 transform 和 opacity 来实现动画，避免触发重绘和回流。
使用 requestAnimationFrame：在 JavaScript 动画中使用 requestAnimationFrame 来优化动画性能。

17. 优化 WebSocket 使用

减少连接数：尽量复用 WebSocket 连接，减少连接数。
心跳机制：使用心跳机制来保持 WebSocket 连接，避免连接断开。
数据压缩：对 WebSocket 传输的数据进行压缩，减少传输量。

18. 优化 WebAssembly 使用

性能关键代码：将性能关键的代码用 WebAssembly 实现，提升执行效率。
与 JavaScript 交互：优化 WebAssembly 与 JavaScript 的交互，减少性能损耗。
使用 Rust/C++：使用 Rust 或 C++ 编写 WebAssembly 代码，提升代码执行效率。

19. 优化 SEO

预渲染：使用预渲染技术来提升 SEO 效果，确保搜索引擎能够正确抓取页面内容。
结构化数据：使用结构化数据来提升搜索引擎对页面内容的理解，提升搜索排名。
优化页面速度：页面加载速度是 SEO 的重要指标，优化页面速度可以提升搜索排名。

20. 持续监控与优化

性能监控：使用性能监控工具持续监控页面性能，及时发现和解决性能问题。
A/B 测试：通过 A/B 测试来验证性能优化效果，确保优化方案有效。
用户反馈：收集用户反馈，了解用户在使用过程中遇到的性能问题，持续优化。