頁面加載順序及觸發的事件

頁面加載大致的幾個步驟

1.開始解析HTML文檔結構。

2.加載外部樣式表及JavaScript腳本。

3.解析執行JavaScript腳本。

4.DOM樹渲染完成。

5.加載未完成的資源（如圖片）。

6.頁面加載成功。

頁面加載觸發的事件

1.document的readystatechange事件

簡單例子：

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事件。

 

"-。-"