在Chrome開發人員工具網絡選項卡中調試多個加載和DomContentLoad行

Question

在Chrome開發人員工具網絡選項卡中，有多次Load和DomContentLoaded。這些在網絡工具中被標記爲紅線和藍線。

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

當分析一些網站，多個負載和DomContentLoaded事件負載標記線出現與後來的線更新所述最終負荷和DomContentLoad倍底部欄。我試圖理解爲什麼有多個事件標記行，因爲文檔說他們應該只出現一次。它看起來像預加載或iframe，但我不知道如何完全調查。

的屏幕截圖是下面（網站測試是http://www.lululemon.co.uk）：

Answer 1

的線表示DOMContentLoaded和加載事件從多個頁面加載。

當您導航到新頁面時，Chrome正在清除請求列表，但概覽仍顯示已記錄的數據。

有時您可以在沒有Load事件的情況下擁有多個DOMContentLoaded事件，因爲可以在DOMContentLoaded事件之後但在Load事件之前離開頁面。

屏幕截圖中的整個錄製內容包含2.5分鐘，但從頁面導航到頁面整頁加載的時間僅在底部欄中顯示爲1.7分鐘。