在 Chrome 开发人员工具网络选项卡中调试多个加载和 DomContentLoad 行

Question

在 Chrome 开发者工具网络标签中，有 Load 和 DomContentLoaded 的时间。这些在网络工具中被标记为红线和蓝线。

https://developer.chrome.com/devtools/docs/network

在分析某些网站时，会出现多个 Load 和 DomContentLoaded 事件加载标记行，后面的行会更新底部栏中的最终 Load 和 DomContentLoad 时间。我试图理解为什么有多个事件标记行，因为文档说它们应该只出现一次。它看起来与预加载或 iframe 有关，但我不确定如何进行全面调查。

截图如下（测试网站为http://www.lululemon.co.uk）：

Answer 1

这些线表示来自多个页面加载的 DOMContentLoaded 和 Load 事件。

当您导航到新页面时，Chrome 正在清除请求列表，但概览仍显示已记录的数据。

有时您可以在没有 Load 事件的情况下拥有多个 DOMContentLoaded 事件，因为可以在 DOMContentLoaded 事件之后但在 Load 事件之前导航离开页面。

您的屏幕截图中的整个录制时间为 2.5 分钟，但从页面导航到页面全页加载的时间在底部栏中显示为仅 1.7 分钟。