瀏覽器 network 中 Finish、DOMContentLoaded 和 Load 釋義說明

1. DOMContentLoaded and Load

DOMContentLoaded: DOM 樹構建完成。即 HTML 頁面由上向下解析 HTML 結構到末尾的封閉標籤</html>

Load: 頁面載入完畢。DOM 樹構建完成後，繼續載入 html/css 中的 img、icon 等外部資源，載入完成後視為頁面載入完畢。

DOMContentLoaded 會比 Load 時間小，兩者時間差大致等於 img、icon 等外部資源載入的時間。

2. Finish

Finish 與 DOMContentLoaded 和 Load 並無直接關係

Finish: 頁面上所有 http 請求傳送到響應完成的時間。http1.0/1.1 協議規定，單個域名的請求併發量是6個，即 Finish 是所有 http 請求在併發量為 6 的限制下完成的時間。

Finish 的時間比 Load 大，意味著頁面有相當部分的請求量。

Finish 的時間比 Load 小，意味著頁面請求量很少，如果頁面只有一個 html 文件請求的靜態頁面，Finish 時間基本等於 html 文件請求的時間。

3. 總結

若系統體量過大，首次載入必然伴隨著巨大量的 http 請求，所以我們很多時候會首先讓使用者看到只需部分資源的首屏頁面，之後再非同步去載入其他資源，此時這個時間更多是參考使用者體驗時間，network 時間只是參考使用，更多是以使用者體驗為準~