瀑布图里每根条的起点是请求发起时刻,横向看的是等待链。
前一根条结束、后一根才开始,说明被上一段逻辑串行挡住了。
配合 Bottom-Up 面板看总耗时,Stalled 和 Waiting 才是排队时间。
定位后用并发或预加载提前发起,把串行链条拆成并排。
# Chrome DevTools 打开路径:F12 -> Network -> 刷新页面
# 1) 勾选 Preserve log,避免跳转后记录被清空
# 2) 右键表头打开 Waterfall 列
# 3) 点任意请求 -> Timing,看各阶段耗时
# Queueing / Stalled:浏览器排队或等待连接
# Waiting (TTFB):服务端处理时间
# Content Download:响应体传输
# 4) 右键某个请求 -> Block request URL,验证它是不是瓶颈
# 判定串行的特征:请求的 Start time 恰好等于上一条的 End time
# 修复方向:接口合并、依赖 preload、把 await 串行改成 Promise.all 并发
THE END






暂无评论内容