文件的載入

document.readystate 屬性描述了文件的載入狀態。當readystate的值變化時，document物件上的readystatechange事件將被觸發。

readystate有三類值：

loading / 載入：document 仍在載入。

interactive / 互動：文件已經完成載入，文件已被解析，但是諸如影象，樣式表和框架之類的子資源仍在載入。

complete / 完成：文件和所有子資源已完成載入。這個狀態表示 load 事件即將被觸發。

// 模擬 domcontentloaded/ jquery ready
document.onreadystatechange = function () 
}// 模擬 load/onload 事件
document.onreadystatechange = function () 
}

當初始html文件被完全載入和解析完成之後，domcontentloaded 事件被觸發，而無需等待樣式表、影象和子框架完成載入。

domcontentloaded支援ie9及以上。在ie8中,可以使用readystatechange事件來檢測dom文件是否載入完畢.在更早的ie版本中,可以通過每隔一段時間執行一次document.documentelement.doscroll("left")來檢測這一狀態，因為這條**在dom載入完畢之前執行時會丟擲錯誤(throw an error)。

瀏覽器向伺服器請求到了 html 文件後便開始解析，產物是 dom（文件物件模型），到這裡 html 文件就被載入和解析完成了。

當文件中沒有指令碼時，瀏覽器解析完文件便能觸發 domcontentloaded 事件；如果文件中包含指令碼，則指令碼會阻塞文件的解析，而指令碼需要等 cssom 構建完成才能執行（因為指令碼可能在文件的解析過程中請求樣式資訊，如果樣式還沒有載入和解析，指令碼將得到錯誤的值。firefox在存在樣式表還在載入和解析時阻塞所有的指令碼，而chrome只在當指令碼試圖訪問某些可能被未載入的樣式表所影響的特定的樣式屬性時才阻塞這些指令碼。詳見）。在任何情況下，domcontentloaded 的觸發都不需要等待等其他資源載入完成。

這兩個屬性都對於內聯指令碼無作用 (即沒有src屬性的指令碼）。

區別

同步指令碼：

當 html 文件被解析時如果遇見（同步）指令碼，則停止解析，先去載入指令碼，然後執行，執行結束後繼續解析 html 文件。過程如下圖：

帶defer ：

當 html 文件被解析時如果遇見 defer 指令碼，則在後台載入指令碼，文件解析過程不中斷，而等文件解析結束之後，defer 指令碼執行。如果有多個defer指令碼，會按照它們在頁面出現的順序載入。過程如下圖：

帶async ：

參考自：

readystate

domcontentloaded

規範how browsers work--behind the scenes of modern web browsers

你不知道的 domcontentloaded

文件的載入

載入 XML 文件

DOM文件載入的步驟

文件載入狀態我們如何確定技術文件的狀態？

文件的載入

載入 XML 文件

DOM文件載入的步驟

文件載入狀態 我們如何確定技術文件的狀態？

相關推薦

文件載入狀態我們如何確定技術文件的狀態？