Q23 · 问题排查
首屏加载慢，你会从"网络层面"具体检查哪些点？
⚡ 速记答案（30 秒）
- 使用 Network 面板，看：首个 HTML 响应时间（后端 / CDN 是否慢）
- 关键 JS / CSS 的体积和下载时间
- 阻塞渲染的资源（未合理使用 defer / async）
- 检查是否引入了过多第三方 SDK（埋点、聊天、小工具等）
- 是否没有利用缓存，每次都重新拉一样的资源
📖 详细讲解
Network 面板分析
1. Waterfall 瀑布图
• 资源加载顺序
• 阻塞关系
• 并行下载数量
2. 关键指标
• TTFB（首字节时间）
• Content Download（下载时间）
• Total Time（总时间）
3. 检查项
| 检查点 | 优化方向 |
|---|---|
| TTFB 过长 | 优化服务端/用 CDN |
| 资源过大 | 压缩/分割 |
| 串行加载 | 并行化/预加载 |
| 无缓存 | 配置缓存策略 |
| 三方脚本多 | 延迟加载 |
分析流程
1. 录制页面加载
2. 查看关键路径
3. 识别瓶颈
4. 针对性优化
面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。