一、DOMContentLoaded 與 load 事件
關(guān)于 DOMContentLoaded 和 load 事件，MDN對他們是這樣描述的：DOMContentLoaded 文檔地址撞蜂、load 文檔地址。
DOMContentLoaded 意思就是：當(dāng)初始的 HTML 文檔被完全加載和解析完成之后侥袜，DOMContentLoaded 事件被觸發(fā)蝌诡，而無需等待樣式表、圖像和子框架的完成加載枫吧。
load 意思就是：當(dāng)一個資源及其依賴資源已完成加載時浦旱，將觸發(fā) load 事件。
區(qū)別小結(jié)
簡而言之九杂，二者觸發(fā)時間的區(qū)別在于：DOMContentLoaded 在 HTML 文檔本解析之后觸發(fā)颁湖，而 load 是在 HTML 所有相關(guān)資源被加載完成后觸發(fā)。
為了感受這兩個事件例隆，可以使用 Chrome 打開一個任意網(wǎng)頁甥捺。打開控制臺的 Network 面板。
如果想要更直觀地感受二者的區(qū)別，還可以 點擊這里 查看效果备韧。
二劫樟、HTML 解析過程與 DOMContentLoaded 觸發(fā)時機
我們已經(jīng)知道 DOMContentLoaded 的觸發(fā)時間為：當(dāng) HTML 文檔被加載和解析完成。那么我們還需要理解 HTML 的解析過程织堂。
-
在既沒有 CSS 也沒有 JS 的情況下叠艳，HTML 文檔的解析過程為：
DOMContentLoaded 事件的觸發(fā)時機為：HTML 解析為 DOM 之后。
-
有 CSS 無 JS 的情況下易阳，HTML 文檔解析過程為：
這里與 1. 不同的地方在于附较，渲染樹的生成是基于 DOM 和 CSSOM 的。但是觸發(fā) DOMContentLoaded 的時間依然是在 HTML 解析為 DOM 后闽烙，無論此時 CSS 解析為 CSSOM 的過程是否完成。
- 當(dāng)有 JS 時声搁，HTML 文檔解析過程為：
有一個問題：關(guān)于首屏?xí)r間黑竞？
“計算這個網(wǎng)頁從空白到出現(xiàn)內(nèi)容所發(fā)費的時間”。那怎么計算這段時間疏旨？這段時間其實就是 HTML 文檔加載和解析的時間很魂。也就是 DOMContentLoaded 事件觸發(fā)之前所經(jīng)歷的時間。
所以檐涝，對于首屏?xí)r間而言遏匆，js 放在 HTML 文檔的開頭和結(jié)尾處效果是一樣的而 js 放在結(jié)尾的目的并不是為了減少首屏?xí)r間，而是由于 js 經(jīng)常需要操縱 DOM谁榜，放在后面才更能保證找到 DOM 節(jié)點幅聘。
待進一步探究
