前端性能优化常见方案

伍拾陆
135 阅读4分钟

1. 代码优化

1.1 减少 JavaScript 和 CSS 的体积

  • 压缩代码：使用工具（如 UglifyJS、Terser、CSSNano）压缩 JavaScript 和 CSS 文件，去除不必要的空格、注释和冗余代码。
  • Tree Shaking：通过构建工具（如 Webpack）移除未使用的代码，减少最终打包体积。
  • 代码分割：将代码按需加载，例如通过 Webpack 的 SplitChunksPlugin 或动态导入（import()）实现路由级或组件级代码分割。

1.2 避免阻塞渲染

  • 延迟加载非关键 JavaScript：使用 defer 或 async 属性延迟加载脚本，避免阻塞页面渲染。
  • 内联关键 CSS：将首屏所需的 CSS 内联到 HTML 中，减少外部 CSS 文件的加载时间。

1.3 使用现代 JavaScript

  • ES6+ 语法：使用箭头函数、解构赋值、let 和 const 等语法，使代码更简洁高效。
  • 模块化开发：使用 ES6 模块或 CommonJS 模块化开发，便于代码管理和优化。

2. 资源优化

2.1 图片优化

  • 选择合适的格式：使用 WebP、JPEG 2000 等现代图片格式，减少图片体积。
  • 图片懒加载：使用原生 loading="lazy" 属性或 Intersection Observer API 实现图片的懒加载。
  • 压缩图片：使用工具（如 TinyPNG、ImageOptim）压缩图片，减少加载时间。

2.2 字体优化

  • 使用 WOFF2 格式：WOFF2 格式体积更小，加载速度更快。
  • 按需加载字体：仅加载页面需要的字体样式，避免加载整个字体文件。
  • 字体显示策略：使用 font-display: swap，避免因字体加载导致的闪烁。

2.3 减少 HTTP 请求

  • 合并文件：将多个 CSS 或 JavaScript 文件合并为一个文件，减少 HTTP 请求。
  • 使用图标字体或 SVG：减少小图标文件的数量。
  • 内联小资源：将小图片或 CSS 转换为 Base64，直接嵌入 HTML 或 CSS 中。

3. 缓存策略

3.1 浏览器缓存

  • 设置 HTTP 缓存头：使用 Cache-Control、Expires 等 HTTP 头设置资源的缓存策略。
  • 版本控制：通过文件名哈希（如 bundle.js?v=123）或 Webpack 的 [hash] 功能，确保浏览器加载最新资源。

3.2 服务端缓存

  • 使用 CDN：将静态资源（如图片、CSS、JS）缓存到 CDN，减少服务器压力，加快加载速度。
  • 服务端渲染（SSR） ：使用 SSR 技术（如 Next.js）提前渲染页面内容，减少首屏加载时间。

3.3 客户端缓存

  • 使用 LocalStorage/SessionStorage：缓存用户数据或配置信息，减少重复请求。
  • Service Worker：通过 Service Worker 缓存静态资源，实现离线访问和快速加载。

4. 网络优化

4.1 使用 HTTP/2

  • 多路复用：HTTP/2 支持多个请求共享一个 TCP 连接，减少连接开销。
  • 服务器推送：通过 HTTP/2 的 Server Push 功能，提前推送资源到客户端。

4.2 预加载和预取

  • <link rel="preload"> ：预加载首屏所需的关键资源（如 CSS、JS）。
  • <link rel="prefetch"> ：预取用户可能访问的资源，提升后续页面加载速度。

4.3 减少重定向

  • 避免不必要的重定向：重定向会增加额外的 HTTP 请求，增加加载时间。
  • 使用 301 永久重定向：如果必须重定向，使用 301 状态码，浏览器会缓存重定向结果。

5. 性能监控与优化

5.1 使用性能分析工具

  • Lighthouse：使用 Chrome 的 Lighthouse 工具分析页面性能，获取优化建议。
  • WebPageTest：测试页面在不同网络环境下的加载速度。
  • Google PageSpeed Insights：分析页面性能并提供优化建议。

5.2 监控关键性能指标

  • FCP（首次内容绘制） ：页面首次渲染内容的时间。
  • LCP（最大内容绘制） ：页面中最大元素加载完成的时间。
  • FID（首次输入延迟） ：用户首次与页面交互的延迟时间。
  • CLS（累积布局偏移） ：页面布局变化的频率和幅度。

5.3 持续优化

  • 定期审查代码：定期检查代码，移除未使用的资源和依赖。
  • 更新工具链：使用最新的构建工具和优化技术，如 Webpack 5、Vite 等。

6. 其他优化技巧

6.1 减少重排和重绘

  • 避免频繁操作 DOM：使用 DocumentFragment 或 requestAnimationFrame 优化 DOM 操作。
  • 使用 GPU 加速：通过 CSS 属性（如 transform、will-change）将动画交给 GPU 处理。

6.2 使用 Web Workers

  • 后台处理：将复杂的计算任务（如数据处理、加密等）放到 Web Workers 中，避免阻塞主线程。

6.3 优化第三方库

  • 按需引入：仅加载页面需要的第三方库功能，例如使用 lodash-es 替代 lodash。
  • 替换轻量级库：例如使用 Day.js 替代 Moment.js。

总结

  1. 减少资源体积：压缩代码、优化图片和字体。
  2. 减少 HTTP 请求：合并文件、使用内联资源。
  3. 合理使用缓存：浏览器缓存、服务端缓存和客户端缓存。
  4. 优化网络请求：使用 HTTP/2、预加载和预取。
  5. 监控性能指标：使用工具分析性能，持续优化。
avatar
文章
阅读
粉丝