浏览器时间线

TimeLine

什么是浏览器时间线？

时间线也能够理解为记录浏览器加载页面一系列发生的过程。

时间线分为哪几个过程？

通常分为十个步骤：

1. 建立 Document 对象，开始解析 web 页面。解析 HTML 元素和他们的文本内容，后添加 Element 对象和 Text 节点到文档中。这个阶段 document.readyState ='loading'。

2. 遇到 link 外部 css，建立线程，进行异步加载，并继续解析文档。

3. 遇到 script 外部 js，而且没有设置 async、defer，浏览器同步加载，并阻塞，等待 js 加载完成并执行该脚本，而后继续解析文档。

4. 遇到 script 外部 js，若是是设置有 async、defer，浏览器建立线程异步加载，并继续解析文档。对于 async属性的脚本，脚本加载完成后当即执行。 （异步禁止使用document.write()，由于当你整个文档解析到差很少，再调用 document.write()，会把以前全部的文档流都清空，用它里面的文档代替）

5. 遇到 img 等（带有 src），先正常解析 dom 结构，而后浏览器异步加载 src，并继续解析文档。

6. 当文档解析完成（DomTree 创建完毕，不是加载完毕），此时document.readyState ='interactive'。

7. 文档解析完成后，全部设置有 defer 的脚本会按照顺序执行。（注意与 async 的不一样,但一样禁止使用 document.write()）

8. document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

9. 当全部 async 的脚本加载完成并执行后、img 等加载完成后（页面全部的都执行加载完以后），document.readyState = 'complete'，window 对象触发 load 事件。

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

如何使用Chrome开发者工具中的timeline？

timeline的使用

更多文章请转移：github.com/wangyicong