Google chrome devtools Chrome开发工具时间轴视图中两个资源之间的间隙会发生什么？_Google Chrome Devtools_Pageload

Google chrome devtools Chrome开发工具时间轴视图中两个资源之间的间隙会发生什么？

google-chrome-devtools

Google chrome devtools Chrome开发工具时间轴视图中两个资源之间的间隙会发生什么？,google-chrome-devtools,pageload,Google Chrome Devtools,Pageload,有人能帮我理解在Chrome开发工具的“网络”选项卡上的时间线中，下面告诉我的是什么吗？具体来说，差距意味着什么在这个极其缓慢的页面加载过程中，资源会显示一些关于如何加载的信息，直到7秒左右。这之后是一个巨大的差距。然后，在大约13秒的时间里，又出现了关于资源加载的信息我已经截断了资源的完整列表，但是唯一跨越这个空白的资源栏是主页的第一个资源。它将gap中发生的事情标识为“内容下载”（蓝色条）：页面上的总资源大小大约为2.5MB。在本例中，DOMContentLoaded和Load事件

有人能帮我理解在Chrome开发工具的“网络”选项卡上的时间线中，下面告诉我的是什么吗？具体来说，差距意味着什么

在这个极其缓慢的页面加载过程中，资源会显示一些关于如何加载的信息，直到7秒左右。这之后是一个巨大的差距。然后，在大约13秒的时间里，又出现了关于资源加载的信息

我已经截断了资源的完整列表，但是唯一跨越这个空白的资源栏是主页的第一个资源。它将gap中发生的事情标识为“内容下载”（蓝色条）：

页面上的总资源大小大约为2.5MB。在本例中，

DOMContentLoaded

和

Load

事件同时发生在13秒附近。

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

例如，我在页面顶部得到了一个图像，然后在HTML中间的一个脚本标记中进一步下降。

这也意味着

Load

事件在

domcontentload

之后会很快发生，因为Chrome已经获取了额外的资源

在您的例子中，有一些JavaScript代码等待这些事件中的任何一个，然后触发其他请求

最初加载时间为13秒的原因是，在等待了~4秒之后，实际下载整个文档还需要9秒

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

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