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

性能优化不是玄学，而是一份可以逐项检查的清单。下面把我常用的几个维度整理出来。

加载阶段

1. 减少关键资源体积：压缩图片、开启 Brotli、按需加载字体。
2. 利用缓存：为静态资源设置长效缓存，配合内容哈希更新。
3. 预连接关键域名：对 CDN 与第三方脚本使用 preconnect。

渲染阶段

浏览器渲染最怕”抖动”。尽量：

• 给图片和媒体预留尺寸，避免布局偏移（CLS）；
• 减少强制同步布局，把读写操作分开；
• 长列表使用虚拟滚动，控制 DOM 数量。

交互阶段

// 用 requestIdleCallback 把非关键任务推迟到空闲时执行
requestIdleCallback(() => {
  initAnalytics();
});

最后记住一句话：先测量，再优化。没有数据支撑的”优化”，往往只是心理安慰。