Chrome Dev Tools时间轴视图中两个资源之间的差距会发生什么？

Question

有人可以帮我理解以下内容告诉我在网络标签时间轴上的Chrome开发者工具中的内容吗？具体来说，差距是什么意思？

在这个非常慢的页面加载过程中，资源会显示一些关于它们如何加载的信息，直到大约7秒左右。接下来是一个很大的差距。然后在接近~13秒时，会再次显示有关资源加载的信息。

我已经截断了完整的资源列表，但跨越差距的唯一资源栏是主页面的第一个资源。它通过“内容下载”（蓝色栏）确定差距中发生的事情：

页面上的总资源大小约为2.5MB。在此示例中，DOMContentLoaded和Load事件在〜13秒标记附近同时发生。

Answer 1

在页面HTML下载完成之前，Chrome开始加载图片或脚本等外部资源。

例如，这里我在页面顶部有一个图像，然后在HTML的中间进一步向下一个脚本标记。

这也意味着Load事件会在DOMContentLoaded之后很快跟进，因为Chrome已经提取了其他资源。

在您的情况下，有一些JavaScript代码会等待其中一个事件，然后触发其他请求。

最初的13s加载时间的原因是在等待时间~4s之后，实际下载整个文档需要另外9s。

这可能是因为浏览器的互联网连接很差，或者因为服务器需要很长时间才能生成响应，或者因为服务器没有足够的带宽。