第一步：确认是“谁慢”
- 网络层面：打开DevTools → Network面板，看Waterfall（瀑布流）。
Queueing时间长 → 浏览器并发限制（同一域名6个），考虑域名分片或HTTP/2。Stalled时间长 → 代理/防火墙问题，或请求优先级低。TTFB时间长（>600ms） → 后端慢（数据库查询、接口逻辑），前端无能为力，需要后端优化。
- 渲染层面：看Performance面板，找长任务（Long Task，>50ms）。
- 主线程被JS阻塞 → 代码分割、Web Worker。
第二步：用工具定位瓶颈
| 工具 | 用途 |
|---|---|
| Lighthouse | 给出综合评分和优化建议（最佳实践、SEO、可访问性） |
| WebPageTest | 多地域、多设备模拟，查看首屏时间、重复访问命中率 |
| Chrome DevTools Coverage | 查看未使用的CSS/JS占比，清理冗余代码 |
第三步：对症下药
- 资源太大：图片用WebP/AVIF、开启Gzip/Brotli压缩、JS/CSS压缩。
- 请求太多：HTTP/2多路复用、打包策略（小文件合并成一个大文件）。
- 阻塞渲染：内联首屏CSS、
<script defer>/async、动态导入（import()）。
