DOM文檔加載流程：
(1) 解析HTML結構。
(2) 加載外部腳本和樣式表文件。
(3) 解析并執(zhí)行腳本代碼。
(4) 構造HTML DOM模型。// DOMContentLoaded 相當于jQuery中的ready
(5) 加載圖片等外部文件。
(6) 頁面加載完畢。// load

1、DOMContentLoaded

MDN解析：當初始HTML文檔已完全加載和解析時，將觸發(fā)DOMContentLoaded事件，而不需要等待樣式表，圖像和子框架頁面加載（事件可以用來檢測HTML頁面是否完全加載完畢(fully-loaded)）。

document.addEventListener("DOMContentLoaded", function(event) {         
    console.log("DOM fully loaded and parsed");         
    console.log(new Date());   
});                                  
for(var i=0; i<10; i++) {         
console.log(new Date());     
}

此過程中會先執(zhí)行for循環(huán)在執(zhí)行DOMContentLoaded事件。

2、document.readyState

MDN解析：當document文檔正在加載時,返回"loading"。當文檔結束渲染但在加載內嵌資源時，返回"interactive"，并引發(fā)DOMContentLoaded事件。當文檔加載完成時,返回"complete"，并引發(fā)load事件。

var eventHandler = function (event) {     
    console.log(event.type);   
    console.log(event.timeStamp);    
    console.log(document.readyState);    
    console.log('\n');
}
console.log(document.readyState);
document.addEventListener('readystatechange', eventHandler,false);
document.addEventListener('DOMContentLoaded', eventHandler, false);
window.addEventListener('load', eventHandler, false);

console輸出如圖所示：

timeStamp返回一個毫秒時間戳，表示事件發(fā)生的時間。如果想將這個值轉為Unix紀元時間戳，就要計算event.timeStamp + performance.timing.navigationStart。

3、jquery寫法

// DOMContentLoaded
$(document).ready(function() { // code... });
// load
$(document).load(function() { // code... });