#前端性能优化全景指南

#1. 核心原则 (RAIL Model)

Google 提出的性能模型：

• Response (响应): 在 50ms 内响应用户输入。
• Animation (动画): 在 10ms 内生成一帧 (60fps)。
• Idle (空闲): 最大化空闲时间 (50ms 块)，以便主线程能处理高优先级工作。
• Load (加载): 在 5s 内提供交互并发送内容 (Time to Interactive)。

#2. 关键指标 (Core Web Vitals)

这是目前业界公认的三大核心指标：

1. LCP (Largest Contentful Paint): < 2.5s (加载速度)。
2. INP (Interaction to Next Paint) (替代 FID): < 200ms (交互响应)。
3. CLS (Cumulative Layout Shift): < 0.1 (视觉稳定性)。

#3. 加载性能优化 (Loading Performance)

目标：尽快让用户看到首屏内容 (FCP/LCP)。

#(1) 资源压缩与合并

• Mini：JS/CSS/HTML 压缩 (Removal of whitespace/comments)。
• Gzip/Brotli：服务端开启压缩，通常能减少 70% 体积。
• Tree Shaking (摇树)：移除未引用的代码 (ES Modules)。
• Code Splitting (代码分割)：
  • 路由懒加载：import() 动态导入组件。
  • 第三方库分包 (SplitChunks)：将 React, Vue 等大库单独打包并长期缓存。

#(2) 图片优化 (Image Optimization)

• 格式选择：WebP / AVIF (比 PNG/JPEG 小 30% 以上)。
• 响应式图片：srcset 和 sizes 提供不同尺寸。
• 懒加载 (Lazy Load)：<img loading="lazy"> 或 IntersectionObserver。
• CDN：使用图像处理服务 (如 Cloudinary, Imgix) 自动裁剪和转换格式。
• Sprite / Base64：小图标合并或内联 (减少请求数)。

#(3) 网络优化 (Network)

• CDN (内容分发网络)：让资源离用户更近。
• HTTP/2 (多路复用)：解决 HTTP/1.1 队头阻塞，无需合并小文件。
• Preload / Prefetch：
  • <link rel="preload">：高优先级加载关键资源 (字体、首屏 CSS)。
  • <link rel="prefetch">：空闲时加载下一页资源。
• Service Worker：离线缓存 (Cache First 策略)。

#4. 运行时性能优化 (Running Performance)

目标：保持 60fps 流畅动画，减少主线程阻塞。

#(1) 减少重绘与回流 (Reflow & Repaint)

• 虚拟列表 (Virtual List)：只渲染可视区域的 DOM 节点 (针对长列表)。
• 避免强制同步布局：读写分离。
• 使用 transform 和 opacity：触发 GPU 加速 (合成层)。
• CSS Containment (contain: layout): 限制回流范围。
• 防抖与节流 (Debounce & Throttle)：限制高频事件 (Scroll, Resize, Input) 的执行频率。

#(2) 计算密集型任务优化

• Web Worker：将耗时计算 (加密、图片处理、大数组排序) 移出主线程。
• Time Slicing (时间切片)：将长任务拆分为多个短任务 (React Concurrent Mode 原理)。
• requestIdleCallback：利用浏览器空闲时间执行低优先级任务 (如埋点上报)。

#(3) 内存优化

• 及时解绑事件。
• 清理定时器。
• 避免闭包泄露。
• WeakMap：弱引用缓存对象。

#5. 渲染流程优化 (Critical Rendering Path)

• 关键 CSS 内联 (Critical CSS)：首屏样式直接写在 <style> 中，避免阻塞渲染。
• JS 异步加载：defer (推荐) 或 async。
• 字体优化：font-display: swap (避免文字隐形 FOUT)。

#6. 面试常见问题

#Q: 如何优化首屏白屏时间？

• SSR (服务端渲染)：直接返回 HTML，无需等待 JS 下载执行。
• 骨架屏 (Skeleton)：减少用户感知的等待时间。
• 资源预加载 (Preload)。
• 代码分割。

#Q: 怎么定位性能瓶颈？

• Network 面板：查看 HTML 下载时间 (TTFB) 和关键 JS/CSS 下载耗时，寻找阻塞资源的体积瓶颈。
• Performance 面板：录制一段时间加载或交互过程，观察 Main 线程长任务 (Long Task) 是否阻塞了重绘，以及 FPS 掉帧情况。
• Lighthouse：全自动打分并给出优化建议。
• Web Vitals Extension：实时查看 LCP, CLS, INP。
• Memory 面板：堆快照查找内存泄漏。