前端性能优化实战：从加载到渲染

性能优化是前端开发中永恒的话题。本文从实际项目经验出发，总结一套可落地的性能优化方案。

一、资源加载优化

1. 图片优化

  • 使用 WebP/AVIF 格式：现代浏览器支持更好的压缩比
  • 懒加载：loading="lazy" 或 Intersection Observer 实现
  • 响应式图片：srcset 和 sizes 根据设备加载合适尺寸
  • CDN 加速：静态资源走 CDN，减少首屏加载时间

2. 代码分割

// 路由级懒加载
const Dashboard = () => import('./views/Dashboard.vue');

// 组件级懒加载
const HeavyChart = defineAsyncComponent(() => import('./components/HeavyChart.vue'));

按需加载可显著减少首屏 JS 体积，提升 FCP（First Contentful Paint）。

3. 预加载关键资源

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin />
<link rel="preconnect" href="https://api.example.com" />

二、渲染优化

1. 减少重排重绘

  • 批量修改 DOM，使用 documentFragment 或 requestAnimationFrame
  • 使用 transform 和 opacity 做动画，触发合成层
  • 避免在循环中读取会触发重排的属性（如 offsetHeight）

2. 虚拟列表

长列表场景使用虚拟滚动，只渲染可视区域 + 缓冲区的 DOM，可大幅降低节点数量。

3. 防抖与节流

搜索输入、窗口 resize、滚动等高频事件务必做防抖或节流处理。

三、打包与构建

  • Tree Shaking：确保 ESM 模块，移除未引用代码
  • 压缩：Terser 压缩 JS，CSS 压缩
  • 分析：使用 rollup-plugin-visualizer 或 webpack-bundle-analyzer 分析包体积

四、监控与度量

关注 Core Web Vitals：LCP、FID、CLS。可使用 Lighthouse、Web Vitals 库或 RUM 方案持续监控。

性能优化是持续过程，建议建立基线指标，每次迭代对比，逐步提升。