网页加载时间线

1. 创建Document对象，开始解析web页面。解析HTML元素后添加Element节点等到文档中，这个阶段document.readyState == ‘loading’。
2. 遇到link外部css，则创建线程异步加载文件，并继续解析文档。
3. 遇到script外部js
   1）没有设置async或者defer属性，浏览器会直接加载并阻塞文档的解析，等待js加载完成并执行该脚本，然后继续解析文档。
   2）设置有async或者defer属性，浏览器会创建线程异步加载文件，并继续解析文档。对于有async属性的脚本，脚本加载完成后立即执行。
4. 如遇img等标签，浏览器会异步加载src，并继续解析文档。
5. 当文档解析完成，document.readyState == ‘interactive’。
6. 文档解析完成后，所有设置defer属性的脚本会执行。
7. document对象会触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段转化为事件驱动阶段。
8. 当所有的async脚本加载并执行完，img等加载完后，document.readyState == ‘complete’，window对象触发load事件。
9. 现在开始以异步响应方式处理用户输入、网络事件等。