前端性能优化检查清单

性能优化很容易陷入局部：压缩一下图片、拆一下包、少一次请求。但用户感受到的是完整链路，从打开页面、看到内容、点击按钮，到操作得到反馈。真正有效的性能优化应该先定位瓶颈，再决定投入方向。

一、先看首屏关键路径

首屏体验取决于 HTML、CSS、关键脚本、字体、首屏图片和首批接口。任何一个环节过慢都会拖慢用户感受。静态页面要关注资源体积和缓存，业务应用还要关注初始化接口和权限恢复。不要在首屏加载低频模块、巨大图片或暂时用不到的数据。

二、渲染性能来自稳定结构

渲染慢不一定是框架问题，可能是 DOM 太多、列表没有虚拟化、图片没有尺寸、复杂阴影和滤镜过多、频繁读写布局。对于高频更新区域，要减少不必要的响应式依赖，避免一次输入触发大范围重渲染。

三、交互反馈也属于性能

有些操作真实耗时无法完全消除，比如提交表单、生成数据、上传文件。此时清晰的 loading、进度、禁用状态和完成反馈会显著改善体验。用户能感知系统正在工作，就不会频繁重复点击或误以为页面卡死。

• 首屏只加载用户马上需要的资源和数据。
• 图片、字体和脚本要有缓存与体积控制。
• 长列表、复杂表格和高频输入要关注渲染范围。
• 慢操作要有明确反馈和重复操作保护。

性能优化最终要回到用户路径。指标可以帮助定位，但不能代替真实页面里的感受和验证。