Chrome Network面板请求状态确定后加载时长持续增加是什么原因？

现象性质 #

该表现属于完全正常的预期行为，不存在浏览器或代码逻辑异常。

核心成因 #

Chrome开发者工具Network面板的请求总计时统计的是请求全生命周期的耗时，并非仅统计到响应状态码返回的节点：

• 响应状态码封装在响应头中，服务器处理完请求后会优先返回响应头，此时浏览器已经可以读取到200的状态码，但资源的实际内容（响应体）还处于网络传输过程中
• 后续响应体的下载、接收耗时都会被计入总请求时长，直到整个资源内容完全下载到本地，计时才会停止

对应场景补充说明 #

你当前的逻辑是先拉取asset-manifest.json配置，再动态创建标签加载对应的main.js主脚本和CSS资源：

• 若main.js体积较大、或者当前网络环境不佳，响应头返回后，JS包体的传输会持续较长时间，就会出现你观测到的“状态码已经是200，但计时持续上涨”的表现
• 你可以点击对应请求的「Timing」标签页，查看Receiving Response阶段的耗时，这部分就是状态码返回后响应体下载的耗时

内容的提问来源于stack exchange，提问作者Bian Artola