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

Question

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

问题 1:这些“差距”在 Chrome WebView 中表示什么？

问题 2:查看屏幕截图、DOMContentLoaded 时间与总体完成时间，是否可以得出任何有助于我进一步优化的结论？

Answer 1

在“性能”面板中记录页面加载。参见 Get Started With Analyzing Runtime Performance了解如何使用面板的要点。 Understanding the network bottleneck还可以帮助您定位。

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

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

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