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