浏览器加载时间线

Posted 2021-02-02 freesfu

浏览器加载时间线

1. 创建document对象，添加节点对象(也就是开始搭建dom结构树)，此时document.readyState = "loading"

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

3. 遇到script引入外部js，并且如果没有设置async、defer，浏览器加载该js文件时会阻塞html的解析过程，一直等待js加载并执行完成

4. 遇到script外部js，并且设置有async、defer，浏览器创建新线程加载，并且继续解析文档，对于async属性的脚本，脚本加载完成以后立即执行，defer则在dom结构搭建完成以后执行(对于异步脚本，禁止使用document.write())

5. 遇到img标签，正常搭建dom结构，并且创建新线程加载src

6. 文档解析完成，状态位改变， document.readyState = "interactive"

7. 资源都加载完成，DOMTree搭建完成，执行defer脚本

8. 之后document对象触发DOMContentLoaded事件，标志着该页面加载渲染完成，并且该事件只能够通过addEventListener绑定

9. 当页面全部加载执行完成以后。更准确的说应该是DOMContentLoaded事件触发以后，状态位改变 document.readyState = "complete"

10. 此后，浏览器以异步响应方式处理用户输入、网络事件等