一、创建 document 对象
开始解析Web页面。解析HTML元素和它们的文本内容后添加 element 对象和text节点到文档中,这个节点的 document.readyState = 'loading'
。
二、加载到link的外部CSS
创建一个线程加载这个资源,并且继续解析文档
三、加载到script的外部 JS(1)
如果script标签上没有设置async、defer等表示异步加载的属性,那么浏览器加载,并且阻塞页面、等待它加载完并且执行完这个脚本
四、加载到script的外部 JS(2)
遇到有async、defer等表示异步加载的属性,创建一个线程加载,不阻塞页面,对于有async 属性的JS,脚本加载完成后就立即执行(异步加载禁止使用document.write等方法)
五、遇到img标签
先根据它的宽高正常解析dom结构(给img在文档中占位),而后创建一个线程加载img的资源
六、文档解析完成后
此时dom的解析完成,wanchdocument.readyState = 'interactive'
,所有设置了defer 的脚本按照顺序执行
七、document 对象触发DOMContentLoaded 事件
标志着程序的运行由同步脚本驱动阶段转换成事件驱动阶段
浏览器开始监听输入事件、点击事件等由用户触发的事件了、
八、当所有资源被加载完成后
例如img等异步标签加载完成后、async脚本加载并执行完毕
document.readyState = complete
window上几个事件的加载顺序
- loading
- interactive
- DOMContentLoaded ,这个事件只能用addEventListener绑定
- load
window 对象触发 load 事件
网友评论