chrome devtools network面板可分解请求耗时，重点关注dns、连接、ttfb和下载各阶段；需禁用缓存、保留日志、限速模拟弱网；颜色标识各阶段，timing页提供毫秒级数据；结合performance面板分析主线程阻塞与渲染延迟。
直接打开 Chrome DevTools 的 Network 面板，刷新页面，就能看到每个请求的完整耗时分解。关键不是看总时间，而是拆开看哪一段拖慢了整体——比如 DNS、连接、等待响应（TTFB）还是下载本身。
打开并配置 Network 面板
按 F12 打开开发者工具，切换到 Network 标签页。开始前建议做三件事：
- 勾选 Disable cache，避免缓存干扰，真实反映首次加载表现
- 开启 Preserve log，尤其在单页应用（SPA）中，能保留路由跳转后的全部请求链路
- 在 Throttling 下选择 “Fast 3G” 或自定义限速，模拟弱网环境下的真实用户场景
读懂瀑布图里的颜色和时间轴
每条横向长条就是一次请求，宽度代表总耗时，内部颜色分段对应不同阶段：
- 浅灰色（Queuing / Stalled）：请求排队或阻塞，常见于 HTTP/1.1 下同源 6 连接限制、渲染引擎推迟低优先级资源（如图片）
- 浅蓝色（DNS Lookup）：域名解析慢，可能需检查 DNS 配置或启用 DNS prefetch
- 深蓝色（Initial Connection / SSL）：TCP 建连或 TLS 握手耗时高，可考虑启用 HTTP/2、预连接（preconnect）或优化证书链
- 橙色（Waiting / TTFB）：从发请求到收到第一个字节的时间，反映后端处理+网络延迟，是服务端性能的关键指标
- 绿色（Content Download）：实际下载内容的时间，体积大或带宽低时会拉长，适合做压缩、CDN 分发或资源懒加载
点击请求查看详情面板
选中某条可疑请求，右侧会显示 Timing 标签页，里面是精确到毫秒的各阶段耗时。重点关注：
- blocked：浏览器忙，无法发出请求（常因连接数满或代理协商）
- dnslookup、connect、ssl：前端可控优化点集中在这三段
- wait（即 TTFB）：若超过 200ms，大概率是服务端响应慢或网络抖动
- receive：下载时间过长说明资源未压缩、未走 CDN 或客户端带宽受限
结合 Performance 面板交叉验证
Network 看“网络怎么跑”，Performance 看“主线程怎么忙”。比如某个请求 TTFB 正常，但页面仍卡顿，就该切到 Performance 面板录制后查看：
- 主线程上是否出现 >50ms 的长任务（Long Task），阻塞了响应
- 是否在请求返回后触发大量 Layout / Recalculate Style，造成渲染延迟
- 用火焰图定位具体 JS 函数，确认是解析 HTML、执行脚本还是渲染逻辑拖慢了首屏
