Dom执行流程 JS时间线;defer 和 async

Dom执行流程 JS时间线

1. 创建Document对象，开始解析web页面。解析HTML元素和文本。这个阶段document.readyState = 'loading'

2. 遇到link外部css，创建线程加载，并继续解析文档。

3. 遇到script外部JS，并没有设置async、defer，浏览器加载，阻塞，等待加载完，再解析文档

4. 遇到script外部JS，并设置了async、defer，浏览器创建线程加载，继续解析文档

   • async 加载完就执行 加载完就执行

   • defer html解析完，才执行 引入顺序依次执行

   • 脚本中禁止使用document.write Ps:他会清空文档流

5. 遇到img等，先正常细节dom结构，然后浏览器异步加载src，并继续解析文档

6. 当文档解析完成，document.readyState = 'interactive'

7. 文档解析完成后，所有设置有defer 的脚本会按照引入顺序，依次执行；

8. document对象触发DOMContentLoaded事件，这也标志程序执行从同步脚本执行阶段，到事件驱动阶段。也就是当前可以接受点击等，事件了。

9. 当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = complete 触发load事件。

10. 从此，以异步响应方式处理用户输入、网络事件等。