前端性能优化：先从测量开始
不要凭感觉优化
最常见的错误是：听说「图片要压缩」「要懒加载」，然后一顿操作，结果首屏还是三秒。
原因是没搞清楚你的瓶颈到底在哪。
测量顺序
- Lighthouse 跑一遍，看五项指标哪个最差
- Performance 面板 录制加载过程，看主线程被谁占住
- Network 面板 看有没有阻塞渲染的资源
三大常见瓶颈
一、主线程被长任务占住
Perf 面板里出现超过 50ms 的黄色长条，就是它。通常是同步执行的 JS 逻辑。
解法：拆分成小块，或者用 requestIdleCallback 延后处理。
二、渲染阻塞资源
<link rel="stylesheet" href="big.css" />
<script src="analytics.js"></script>
CSS 会阻塞首次渲染，同步 JS 会阻塞 HTML 解析。二者都放进关键路径，首屏必然慢。
解法：非关键 CSS 异步加载，脚本加 defer。
三、布局抖动
在循环里反复读 offsetHeight 再写样式，会触发多次强制重排。
for (const el of items) {
el.style.width = container.offsetWidth + 'px';
}
先批量读，再批量写。
一个被我忽略过的指标
CLS（布局偏移）。内容加载后图片才撑开高度，页面突然跳动 —— 用户点错按钮就是这么来的。
给图片写死宽高比就能解决：
img { aspect-ratio: 16 / 9; width: 100%; height: auto; }
小结
性能优化是工程，不是玄学。先测量、再定位、后优化、最终验证，四步缺一不可。
