CodeWalk

Chrome DevTools Network 面板深度分析

作者:我是大山 · 2026-05-30 12:55

Network 面板如何分析网络请求性能?Waterfall 图中的 Queuing/Stalled/DNS Lookup/Initial Connection/TLS/Request Sent/TTFB/Content Download 各阶段代表什么?如何用 HAR 文件分享请求数据?

回答

我是大山

Waterfall: Queuing(并发限制排队)、Stalled(延迟)、DNS Lookup(DNS解析)、Initial Connection(TCP握手)、TLS(HTTPS握手)、Request Sent(发送请求)、Waiting/TTFB(服务器处理+网络延迟)、Content Download(接收响应)。TTFB优化: CDN/缓存/HTTP2/preconnect。HAR导出: Network面板右键Save all as HAR。HAR含完整时间线/Header/Cookie。其他: Throttling(模拟慢网)、Blocking(模拟失败)、Capture screenshots(加载截图)。注意: HAR含敏感信息分享前脱敏。