頁面加載順序及觸發事件

頁面加載順序：

1. 開始解析HTML文檔結構
2. 加載外部樣式表及JavaScript腳本
3. 解析執行JavaScript腳本
4. DOM渲染完成
5. 加載未完成的資源（圖檔）
6. 頁面加載完成

頁面加載過程中觸發的事件：

document.onreadystatechange

document.onreadystatechange = function() { // 文檔加載狀态改變事件處理
    if (document.readyState === "loading") { // document加載中
        console.log(document.readyState);
    }
    if (document.readyState === "interactive") { // 互動文檔加載完成，文檔解析完成，但是如圖像，樣式表和架構等子資源仍在加載中
        console.log(document.readyState);
    }
    if (document.readyState === "complete") { // 文檔和所有子資源加載完成，load事件即将被觸發
        console.log(document.readyState);
    }
}
           

readyState屬性描述了文檔的加載狀态，整個加載過程中document.readyState會不斷變化，每次變化都觸發readystatechange事件。

也可以用事件監聽器去綁定：

document.addEventListener("readystatechange", function() {
    console.log(document.readyState);
});
           

2.document的DOMContentLoaded事件

DOM樹渲染完成時候觸發DOMContentLoaded事件，此時可能外部資源還在加載。jQuery中的ready事件就是實作的這個事件。

3.window的load事件

當所有的資源全部加載完成後就會觸發window的load事件。