一、DOMContentLoaded 與 load 事件
關於 DOMContentLoaded 和 load 事件，MDN對他們是這樣描述的：DOMContentLoaded 文檔地址、load 文檔地址。
DOMContentLoaded 意思就是：當初始的 HTML 文檔被完全加載和解析完成之後，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成加載。
load 意思就是：當一個資源及其依賴資源已完成加載時，將觸發 load 事件。
區別小結
簡而言之，二者觸發時間的區別在於：DOMContentLoaded 在 HTML 文檔本解析之後觸發，而 load 是在 HTML 所有相關資源被加載完成後觸發。
爲了感受這兩個事件，可以使用 Chrome 打開一個任意網頁。打開控制檯的 Network 面板。
可以看到圖上有兩條線：一條藍線，代表 DOMContentLoaded 事件，觸發時間爲 1.50s；一條紅線，代表 load 事件，觸發時間爲 5.54s。
如果想要更直觀地感受二者的區別，還可以 點擊這裏 查看效果。
二、HTML 解析過程與 DOMContentLoaded 觸發時機
我們已經知道 DOMContentLoaded 的觸發時間爲：當 HTML 文檔被加載和解析完成。那麼我們還需要理解 HTML 的解析過程。
-
在既沒有 CSS 也沒有 JS 的情況下，HTML 文檔的解析過程爲：DOMContentLoaded 事件的觸發時機爲：HTML 解析爲 DOM 之後。
-
有 CSS 無 JS 的情況下，HTML 文檔解析過程爲：這裏與 1. 不同的地方在於，渲染樹的生成是基於 DOM 和 CSSOM 的。但是觸發 DOMContentLoaded 的時間依然是在 HTML 解析爲 DOM 後，無論此時 CSS 解析爲 CSSOM 的過程是否完成。
- 當有 JS 時，HTML 文檔解析過程爲：
有一個問題：關於首屏時間？
“計算這個網頁從空白到出現內容所發費的時間”。那怎麼計算這段時間？這段時間其實就是 HTML 文檔加載和解析的時間。也就是 DOMContentLoaded 事件觸發之前所經歷的時間。
所以，對於首屏時間而言，js 放在 HTML 文檔的開頭和結尾處效果是一樣的而 js 放在結尾的目的並不是爲了減少首屏時間，而是由於 js 經常需要操縱 DOM，放在後面才更能保證找到 DOM 節點。
待進一步探究
作者：人總要靠自己_趁年輕去努力
鏈接：https://www.jianshu.com/p/c3384c315d40
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。