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... });
