网站速度直接影响用户体验和 SEO。性能优化是个系统工程，本文按"加载 → 渲染 → 运行"三个阶段梳理。
一、加载阶段优化
- 压缩资源：gzip/brotli 压缩 HTML/CSS/JS
- 合并请求：减少 HTTP 请求数（小图合并雪碧图）
- 懒加载：图片、组件按需加载（
loading="lazy"） - CDN 加速：静态资源放 CDN，就近访问
- HTTP/2：多路复用，无需过度合并文件
二、关键渲染路径
浏览器渲染流程：HTML 解析 → DOM，CSS 解析 → CSSOM → 合并渲染树 → 布局 → 绘制。优化要点：
defer让 JS 异步下载、HTML 解析完后按顺序执行；async则下载完立即执行（不保证顺序）。首屏用 defer 最稳。
三、减少重排重绘
- 批量改样式：
class切换优于多次改 style - 用 transform/opacity 做动画（GPU 加速，不触发重排）
- 避免频繁读取触发强制布局的属性（offsetHeight 等）
四、图片优化
- 用现代格式：WebP / AVIF 比 JPEG 小 30-50%
- 响应式图片：srcset 提供多尺寸
- 懒加载 + 占位符，避免布局抖动
五、运行时优化
- 防抖（debounce）/ 节流（throttle）控制高频事件
- 虚拟列表处理超长列表
- Web Worker 把重计算移出主线程
六、测量工具
- Lighthouse：综合评分与建议
- Chrome DevTools Performance：运行时火焰图
- Web Vitals：核心指标（LCP、FID、CLS）
七、小结
性能优化要"先测量后优化"。用 Lighthouse 找瓶颈，针对性优化。80% 的收益通常来自前 20% 的工作（压缩、缓存、CDN）。