HTML解析過程會觸發哪些事件？

本文參考MDN。

先了解一下幾個事件，答案在最後面。

readystatechange事件

當readyState的屬性值發生更改時，將觸發該事件。

readyState能夠取如下值：

• loading：表示document仍在加載
• interactive：文檔已完成加載和解析，但子資源（如images,stylesheets and frames）仍在加載
• complete文檔和全部子資源已完成加載，load事件即將開始。

load事件

當資源及其依賴的資源已完成加載時觸發。當頁面徹底加載後（包括全部的圖像、JavaScript文件、css文件等外部資源）。

load加載給定資源時將觸發onload事件

DOMContentLoaded事件

當最初的HTML文檔已被徹底加載和分析時觸發，而無需等待stylesheets，images、和subframes完成加載。

DOM樹渲染完成時觸發DOMContentLoaded事件，此時可能外部資源還在加載。

執行順序

readystatechange， loading狀態 -> readystatechange， interactive狀態 ->DOMContentLoaded事件 -> readystatechange， complete狀態 -> window.onload