前端性能优化：先解决用户真正能感知的问题

性能优化的目标不是得到漂亮的检测分数，而是让用户更快看到内容、更快完成操作。开始优化前，应先用真实数据确认问题发生在哪里。

加载阶段：减少关键资源#

首屏真正需要的 JavaScript、CSS、字体和图片应该优先加载，其余内容可以延后。大型依赖要检查是否真的需要完整引入，页面级功能可以按需加载。

图片通常是页面中体积最大的资源。根据显示尺寸输出合适宽度，使用 WebP 或 AVIF，并为非首屏图片启用懒加载，通常能快速取得明显效果。

渲染阶段：保持页面稳定#

图片和嵌入内容应提前声明宽高，让浏览器在资源到达前预留空间。这样可以减少内容突然跳动，避免用户刚要点击按钮时页面发生位移。

字体加载也会影响稳定性。控制字体文件数量、提供合理的系统字体后备，并避免为每个字重加载单独的大文件。

交互阶段：别堵塞主线程#

长时间运行的 JavaScript 会让点击和输入失去响应。把大任务拆成小任务、减少不必要的渲染，并在适当场景把计算移到 Web Worker，可以改善交互延迟。

建立优化顺序#

推荐按照“测量、定位、修改、复测”的顺序工作。一次只改变一个主要因素，更容易判断优化是否有效。实验室工具适合发现问题，线上监控则能告诉我们真实用户是否得到了改善。