在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分钟。