Chrome/Edge DevTools中Resource Timing加载时长统计不符问题

现象 #

资源加载各细分阶段（DNS解析、TCP连接、SSL握手、请求发送、响应下载等）耗时均为个位数毫秒，但面板统计的总加载耗时达322.49ms，加载瀑布图中存在明显空白间隙段，相关截图如下：

核心原因 #

面板展示的细分阶段耗时仅统计了实际执行网络相关操作的时长，总加载耗时统计的是从浏览器首次为该资源启动调度流程，到资源完全加载完成的全链路时长，二者的差值、瀑布图中的空白段，均属于浏览器侧的调度等待时间，不会被计入标准Resource Timing定义的网络细分阶段，常见触发场景如下：

• 同域名并发连接排队：HTTP/1.1协议下浏览器对单个域名的并发TCP连接数限制为6个，若同域名同时发起的请求数超过阈值，后续请求必须排队等待前面的请求释放连接，这段等待时间不会计入任何网络阶段耗时。
• 资源优先级调度等待：浏览器会根据资源类型、在页面中的位置分配加载优先级，高优先级的核心HTML、CSS、阻塞渲染的JS会优先占用连接资源，低优先级的非关键图片、异步脚本、低优预加载资源会被暂缓调度，暂缓等待的时长不会计入网络阶段明细。
• 本地缓存读取等待：若资源命中本地强缓存，从磁盘/内存读取资源的IO等待时间、浏览器渲染进程与网络进程的IPC通信延迟，不会被计入网络传输类阶段的耗时统计。
• 前置校验等待：触发CORS预检、内容安全策略检查、第三方Cookie权限校验、跨进程鉴权的请求，在实际发起网络流程前的内部校验等待时间，不会计入后续网络阶段耗时。

验证方法 #

在Network面板的表头位置右键，勾选调出Queueing（排队）、Stalled（停滞）两个字段，这两个字段的数值之和基本等于空白段时长，和所有网络细分阶段耗时相加后，即可和面板展示的总加载时长匹配。

Resource Timing标准中总时长计算公式为responseEnd - startTime，其中startTime是浏览器首次调度该资源的时间点，而各细分阶段的统计起点是实际启动对应网络操作的时间点，两个时间点的差值就是上述等待类耗时。

内容的提问来源于stack exchange，提问作者David Min