js加载时间线

创建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事件.
全部过程完成, 用户可以操作了.

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。