前端性能优化不是玄学：从指标到落地的检查清单

性能优化最容易陷入两个极端：要么凭感觉删代码，要么盯着一个分数反复微调。更有效的方法，是先明确用户遇到的慢发生在哪个阶段，再用可复现的数据验证变化。

先定义观察指标

页面性能至少要区分首屏出现、主要内容稳定、用户首次可交互以及后续操作响应。不要只在开发者电脑上测试，还要覆盖普通手机、弱网和冷缓存场景。

加载阶段：减少无效传输

• 压缩图片并提供符合展示尺寸的资源，避免用原图做缩略图。
• 拆分首屏不需要的 JavaScript 和 CSS，让关键内容优先到达。
• 对字体、图片和接口设置合理缓存，文件名带内容哈希。
• 检查第三方脚本；它们经常是首屏延迟和主线程阻塞的来源。

渲染阶段：减少布局与阻塞

为图片和嵌入内容预留宽高，避免加载后推挤页面。动画优先使用 transform 和 opacity，少在滚动过程中频繁读取布局再立即写入样式。

交互阶段：缩短反馈时间

长任务应拆分执行，搜索输入和滚动监听要做节流，复杂列表考虑虚拟化。点击后立即给出视觉反馈，即使后台任务仍在运行，用户也能知道操作已经被接收。

建立性能预算

为首屏资源体积、关键请求数量和主要交互耗时设定上限，并把检查放进发布流程。性能预算的意义不是追求绝对分数，而是阻止网站在持续迭代中悄悄变慢。

先测量，再定位；一次只改变一个变量，然后重新验证。