DOM文檔加載流程：
(1) 解析HTML結構。
(2) 加載外部腳本和樣式表文件。
(3) 解析并執行腳本代碼。
(4) 構造HTML DOM模型。// DOMContentLoaded 相當于jQuery中的ready
(5) 加載圖片等外部文件。
(6) 頁面加載完畢。// load
1、DOMContentLoaded
MDN解析：當初始HTML文檔已完全加載和解析時，將觸發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());
}
此過程中會先執行for循環在執行DOMContentLoaded事件。
2、document.readyState
MDN解析：當document文檔正在加載時,返回"loading"。當文檔結束渲染但在加載內嵌資源時，返回"interactive"，并引發DOMContentLoaded事件。當文檔加載完成時,返回"complete"，并引發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返回一個毫秒時間戳，表示事件發生的時間。如果想將這個值轉為Unix紀元時間戳，就要計算event.timeStamp + performance.timing.navigationStart。
3、jquery寫法
// DOMContentLoaded
$(document).ready(function() { // code... });
// load
$(document).load(function() { // code... });
