定义

时间线:浏览器地址栏输入网址并且开始加载界面到界面加载完毕完全结束的过程中按顺序发生的每一件事情的总流程

js引擎开始阅读文档 -产生dom对象 js开始生效
遇到link，style标签另开线程异步加载开始构建cssom(css 树)
遇到没有异步标签的script 标签的时候，解析代码，阻塞文档解析。
遇到存在异步加载的脚本文件开线程加载代码不阻塞文档解析。 async 当 script 加载完毕就执行 defer等文档加载完毕才执行
遇到img标签，src属性的时候就另开线程加载src的地址。不阻塞文档解析。
文档解析完毕： defer script脚本文件开始执行。
文档解析完毕：调用DOMContentLoaded事件。
文档解析完毕：当async script 脚本文件加载完毕、图片 cssom dom树构建完毕的时候调用window.onload方法 ```javascript /**/ // 时间线 // document.write window.onload = function(){ document.write(“a”); // 替换全部 } document.write(“a”)// 追加 // reason 在dom结构树，css树还没完成的情况下 document.write 是会追加的

CSSOM DOM // 时间线。浏览器地址栏输入网址并且开始加载界面到界面加载完毕完全结束的过程中 // 按顺序发生的每一件事情的总流程时间线

document 对象 -> JS 就起作用了
解析文档看一遍代码代表了构建dom树 document.readyState === “loading”
link 开新的线程 -> 异步加载css外部文件 style -> CSS树
没有设置异步加载的script 阻塞文档解析等待js脚本加载并且执行完成后，继续解析文档
异步加载script 异步加载js脚本并执行不阻塞解析文档不能使用document.write 非要用 window.onload = function(){}
解析文档遇到img 先解析这个节点。 src 创建加载线程异步加载图片资源不阻塞解析文档
文档解析完成 document.readyState === “interactive”
文档解析完成 :defer(等文档加载完成，才执行) async(立刻执行) script JS脚本开始按照顺序执行
文档解析完成 DomContentLoaded 事件同步的脚本执行阶段 -> 事件驱动阶段
async script 加载并执行完毕 img等资源加载完毕之后 window.onload事件才触发 document.readyState === “complete”

console.log(document.readyState);//loading document.onreadystatechange = function(){ console.log(document.readyState);//interactive complete }

document.addEventListener(“DOMContentLoaded”,function(){ console.log(“DOMContentLoaded”) },false)

```