如何做前端性能优化？

前端性能优化主要分为资源加载优化和代码优化两大方向，通过合理运用技术手段减少资源体积、提升加载效率、优化执行性能，从而提升用户体验。

• 使用 HTTP/2

  头部压缩：通过 HPACK 算法压缩请求头，减少传输数据量。

  多路复用：允许同时发送多个请求，充分利用带宽，避免 HTTP/1 的排队阻塞问题。

• 资源压缩

  开启 gzip/br 压缩：对文本类资源（如 HTML、CSS、JS）启用服务器端压缩，减少传输体积。

  图片压缩：使用 WebP 格式替代 JPG/PNG（需判断浏览器支持），或通过工具压缩图片质量。

  文本压缩：通过编译工具（如 Webpack）移除代码中的空格、注释，缩短变量名。

• 延迟加载（懒加载）

  图片懒加载：滚动到可视区域时再加载图片（如知乎、Next.js 的 Image 组件）。

  JS 模块懒加载：通过 ES6 动态 import() 实现按需加载。

  组件懒加载：通过条件渲染（如 {visible && <Component />}）延迟加载非关键组件。

• 减少 HTTP 请求

  Base64 内联：将小图标（如小于 8KB）转换为 Base64 嵌入 HTML，减少请求数。

  雪碧图（CSS Sprites）：合并多个小图标为一张大图，通过 background-position 定位使用。

  合理拆分资源：在 HTTP/2 环境下，拆分资源可利用多路复用和细粒度缓存。

• 空闲时加载资源

  使用 <link rel="prefetch"> 预加载未来可能用到的资源（如跳转页面的脚本），利用空闲带宽缓存。

• HTTP 缓存策略

  强缓存：通过 Cache-Control: max-age 设置缓存有效期，直接复用本地资源。

  协商缓存：通过 Last-Modified 或 ETag 验证资源是否更新，避免重复下载。

• 域名分片

  将资源分散到多个域名下，利用浏览器对每个域名的并行 TCP 连接限制（如 HTTP/1 下 5-8 个连接），提升并发加载能力。

• 使用 CDN

  通过内容分发网络将静态资源部署到全球节点，用户就近获取资源，减少延迟。

• 优化图片使用

  矢量图（SVG）：替代位图（如 PNG/JPG），减少体积（SVG 存储形状文本而非像素）。

  缩略图：列表页展示缩略图，点击后再加载原图。

• 节流与防抖

  节流（Throttle）：固定时间间隔执行一次函数（如滚动事件每 200ms 触发一次）。

  防抖（Debounce）：延迟执行函数，直到高频事件停止后触发最后一次（如搜索框输入完成后再请求）。

• 事件委托

  将子元素的事件处理委托给父元素，利用事件冒泡减少内存占用（如 ul 统一处理 li 的点击事件）。

• 使用缓存

  通过哈希表（如对象、Map）缓存计算结果，避免重复计算（如回溯算法中的备忘录模式）。

• 长列表优化

  时间分片：分批次渲染列表项（如每 16ms 渲染 10 项），避免阻塞主线程。

  虚拟列表：仅渲染可视区域内的列表项（如 React 的 react-window 库）。

• Web Worker

  将耗时任务（如大数据处理、复杂计算）放到 Web Worker 中执行，避免阻塞主线程。

• 避免内存泄漏

  清理监听器：在组件卸载时移除事件监听（如 React 的 useEffect 返回清理函数）。

  避免全局变量：全局变量不会被垃圾回收，可能导致内存堆积。

  管理集合数据：及时清理不再使用的数组或对象中的大数据。

• 减少回流与重绘

  批量操作 DOM：避免频繁修改样式（如一次性添加多个元素而非逐个插入）。

  使用 CSS 优化：避免使用触发回流的属性（如 width、height），优先使用 transform 或 opacity。

• React 特定优化

  React.memo：缓存组件，避免不必要的重新渲染。

  状态批量更新：使用 React.useReducer 或自动批处理减少渲染次数。

• 服务端渲染（SSR）/预渲染

  在服务端生成 HTML 并注入数据，减少客户端渲染时间，提升首屏速度。

• 避免过早优化：优先解决明显性能问题，再通过工具（如 Lighthouse、Chrome DevTools）分析瓶颈。
• 持续监控：通过性能 API（如 Performance）或 APM 工具（如 Sentry）跟踪优化效果。