时间线

定义：在浏览器开始加载页面的那一刻到加载完成的过程中间按顺序发生的每一件事情的总流程叫时间线 顺序：

1. 页面加载生成 document 对象 js 起作用

2. 解析文档，构建 DOM 树

   document.readyState="loading" 加载中

3. link style 开新的线程异步加载 css 外部文件->CSSOM

4. 没有设置异步加载的 script，阻塞文档解析，等待 JS 脚本加载并且执行完毕后继续解析文档

5. 异步加载 script，异步加载 JS 脚本并且执行不阻塞文档（不能使用 document.write() 除非 window.onload）

6. 解析文档遇到 img 先解析节点，遇到 src 开新线程异步加载图片资源，不阻塞解析文档

7. 文档解析完成

   document.readyState="interactive" 解析完成

8. 文档解析完成后：defer script 脚本开始按照顺序执行（defer 异步加载完不执行等到 DOM 解析完成后执行）

9. 文档解析完成后：触发 DOMContentLoaded 事件 程序:同步的脚本执行阶段往事件驱动阶段转变

10. async script 加载并完成后，img 等资源加载完毕，window 对象中的 onload 事件才触发

    document.readyState="complete " 加载完成

现代浏览器修改了解析渲染模式 一边解析一边渲染 所以这种情况下如果 script 放在了 body 标签最上面则会阻塞解析文档 延长 first paint 白屏时间

document.write() 在解析结束前执行的话会在 body 后面追加，但是解析结束的话会替换整个 body 里的内容