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

1、DOMContentLoaded

MDN解析：當(dāng)初始HTML文檔已完全加載和解析時(shí)，將觸發(fā)DOMContentLoaded事件，而不需要等待樣式表，圖像和子框架頁面加載（事件可以用來檢測(cè)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());     
}

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

2、document.readyState

MDN解析：當(dāng)document文檔正在加載時(shí),返回"loading"。當(dāng)文檔結(jié)束渲染但在加載內(nèi)嵌資源時(shí)，返回"interactive"，并引發(fā)DOMContentLoaded事件。當(dāng)文檔加載完成時(shí),返回"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返回一個(gè)毫秒時(shí)間戳，表示事件發(fā)生的時(shí)間。如果想將這個(gè)值轉(zhuǎn)為Unix紀(jì)元時(shí)間戳，就要計(jì)算event.timeStamp + performance.timing.navigationStart。

3、jquery寫法

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