在 Chrome 开发者工具的网络选项卡下，我很想知道间隙期间发生了什么。如果您查看下面的图片，我会用橙色突出显示这些间隙所在的区域。我可以从缓存中加载大量页面，但遗憾的是出现这些较大的间隙，因为它们占据了我大部分的页面加载时间。这段时间到底发生了什么？
编辑
好的，我找到了这个答案这基本上总结了我的问题，所以另一个问题是：有人知道减少这些间隙长度的好方法吗？假设（尽管有些极端）如果我在页面上加载所有 CSS，则在加载 CSS 文件后再加载图像之前不会有延迟。
答案1
我知道这不是您问题的直接答案，但是您是否考虑过使用其他工具（例如 Fiddler 或 WireShark）进行监控？使用其他工具可能会更深入地了解问题的根本原因。
答案2
由于这些差距代表同步等待和本地处理（渲染，执行脚本，在各个请求的线程之间进行时间分片等），所有传统的瓶颈，如核心的数量或频率（同时运行更多线程并减少同步等待将 CSS 与标记和脚本一起拉动以便可以渲染）、足够的可用 RAM（每个进程都有限制，所以它不仅仅是全局可用的 RAM；令人惊讶的是，关闭 chrome 标签可以有所帮助）、磁盘/网络 IO 速度（因为您正在读取缓存），所有这些都可以以自己的方式做出贡献。
检索现代网站所需的所有各种资源是一个非常多线程的活动，与 IO 紧密相关，因此以最优方式加载和呈现页面涉及很多复杂性。
答案3
有许多方法可以减少 dev-tools 网络瀑布中的“差距”。主要是调整和优化您的网站以获得更好的性能，并观察文件从服务器传递到用户的顺序。请参阅链接以了解一些示例的描述。