頁面加載順序:
- 開始解析HTML文檔結構
- 加載外部樣式表及JavaScript腳本
- 解析執行JavaScript腳本
- DOM渲染完成
- 加載未完成的資源(圖片)
- 頁面加載完成
頁面加載過程中觸發的事件:
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事件。