看 Network 瀑布图,找出被串行等待拖慢的请求

瀑布图里每根条的起点是请求发起时刻,横向看的是等待链。

前一根条结束、后一根才开始,说明被上一段逻辑串行挡住了。

配合 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
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容