Chrome DevTools Network Waterfall - 请求之间的差距？

Question

我一直在对运行缓慢的 Web 应用程序进行一些重构，并设法减少请求数量和下载大小以帮助改善这种情况。现在加载时间持续缩短。然而，在最后 2 个请求之前几乎没有任何时间过去。现在始终存在差距。

问题 1：Chrome 网络视图中的这些“差距”表示什么？

Q2：查看屏幕截图，DOMContentLoaded 时间与整体完成时间，我可以得出任何可以帮助我进一步优化的结论吗？

Answer 1

在性能面板中记录页面加载。请参阅分析运行时性能入门以了解如何使用该面板的要点。了解网络瓶颈也可以帮助您确定方向。

但是，您需要按“重新加载页面”按钮（就像 Sam 在“了解网络瓶颈”视频中所做的那样）而不是“记录”按钮来记录页面加载性能，因为“开始分析运行时性能”会指示您去做。

获得录音后，Main部分会显示页面加载时发生的所有主线程活动。该网络节将展示所有的网络请求。您可能能够直观地验证在您在屏幕截图中看到的间隙期间是否有大量 JavaScript 工作正在进行。

如果您仍然不清楚，请发布您的性能面板录制的屏幕截图，我会帮助您解码结果。