问题
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):
回答1:
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.
来源：https://stackoverflow.com/questions/37435668/debugging-multiple-load-and-domcontentload-lines-in-chrome-developer-tools-netwo