定义
在浏览器加载页面开始的那一刻到页面完全加载结束的这个过程中，按顺序发生的每一件事情的总流程
加载过程
1. 创建document对象 （#document） JS就开始作用了 DOM操作都是基于该对象
2. 解析文档，从HTML文档的第一行开始阅读，传统浏览器不做任何操作，只是构建DOM树
----- document.readyState = 'loading' 加载中
3.（同时与第2步）link 、开新的线程 -> 异步加载css外部文件 style -> CSSDOM
4. 没有设置异步加载的SCRIPT标签，必阻塞文档解析
会等待JS脚本加载并且执行完成后，继续解析文档
5. 异步加载的SCRIPT，异步加载JS脚本并执行，不阻塞解析文档（不能使用document.write）
6. 解析文档遇到img 先解析这个节点，如果src=“ ” 有内容。创建加载线程，异步加载图片资源，不阻塞解析文档
----- document.readyState = 'interactive' 解析完成，可交互
7. 文档解析完成
8. 文档解析完成以后 defer script JS脚本开始按照顺序执行，async加载会立即执行（即5执行）
9. 文档解析完成以后 会触发 DOMContentLoaded时间
程序：同步的脚本执行阶段 -> 事件驱动阶段（用户体验开始）
10. async script加载并执行完毕（异步不确定），img等资源加载完毕，window对象的onload事件才触发
----- document.readyState = 'complete' 加载完成
Document.readyState
描述了 document 的加载状态，当该值发生变化时，会触发 onreadystatechange 事件
console.log(document.readyState) // loading
document.onreadystatechange = function () {
// 只有值改变才会触发，最开始是 loading 状态
console.log(document.readyState)
} // 只打印 interactive complete
document.addEventListener('DOMContentLoaded', function () {
// 文档解析完成就触发DOMContentLoaded
cosnole.log('DOMContentLoaded')
}, false)
