js加载时间线

1. 创建Document对象, 开始解析web页面. 解析HTML元素和它们的文本内容之后, 添加Element对象和Text节点到文档中. 这个阶段document.readyState = "loading".
2. 遇到link外部CSS, 创建线程加载, 并继续解析文档;
3. 遇到script外部js, 并且没有设置defer async, 加载js文件, 阻塞, 等待js文件加载完毕并执行该脚本, 然后继续解析文档;
4. 遇到script外部js, 并且设置了defer async, 浏览器创建线程加载, 并且继续解析文档, 对于async的脚本, 加载完成立即执行. (异步加载的时候禁止使用document.write(), 因为其有清空dom树的能力, 甚至变态到把写他自己的script标签都删除掉)
5. 遇到img, 先正常解析dom结构, 在异步加载src, 并继续解析文档;
6. 当文档解析完成, document.readyState = "interactive"
7. 文档解析完成后, 所有设置有defer的脚本会按照顺序依次执行(同样禁止使用document.write()).
8. document对象触发DOMContentLoaded事件;
9. 当所有的异步脚本加载完毕并执行, img加载完毕, document.readyState = "complete", window对象触发load事件.
10. 全部过程完成, 用户可以操作了.