在Chrome开发者工具的“网络"标签中调试多条负载和DomContentLoad行 [英] Debugging multiple load and DomContentLoad lines in Chrome Developer Tools Network Tab

问题描述

在Chrome开发者工具的网络标签中，有时会加载Load和DomContentLoaded.这些在网络工具中分别标记为红线和蓝线.

解决方案

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

导航到新页面时，Chrome会清除请求列表，但总览仍会显示已记录的数据.

有时候，您可以有多个没有加载事件的DOMContentLoaded事件，因为可以在DOMContentLoaded事件之后但在Load事件之前离开页面.

您的屏幕快照中的整个记录​​涵盖了2.5分钟，但是从页面导航到页面满页面加载的时间在底部栏中仅显示了1.7分钟.

In the Chrome Developer Tools network tab, there are times for Load and DomContentLoaded. These are marked as a red line and a blue line in the network tools.

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

When analysing some websites, multiple Load and DomContentLoaded event load marker lines appear with the later line updating the final Load and DomContentLoad times in the bottom bar. I am trying to understand why there are multiple event marker lines as the documentation says they should only appear once. It looks like it something to do with pre-loading or iframes but I am not sure how to fully investigate.

A screenshot is below (website tested is http://www.lululemon.co.uk):

解决方案

The lines represent the DOMContentLoaded and Load events from multiple page loads.

When you navigate to a new page Chrome is clearing the list of requests, but the overview is still showing the already recorded data.

Sometimes you can have a multiple DOMContentLoaded events without a Load event, because it's possible to navigate away from the page after the DOMContentLoaded event, but before the Load event.

The whole recording in your screenshot covers 2.5 minutes, but the time from page navigation to page full page load is shown as only 1.7 minutes in the bottom bar.

这篇关于在Chrome开发者工具的“网络"标签中调试多条负载和DomContentLoad行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！