link引入css资源小结
-
外链css加载不会阻塞html页面解析;
-
外链css加载会阻塞渲染;(可以简单理解成若不阻塞,渲染完成,样式加载后又需要重新渲染,所以设计为需要阻塞 -- 个人理解)
-
外链css加载会阻塞后面js脚本的执行;
script src引入脚本小结
-
遇到无async defer的脚本,会等待脚本加载并执行完才会继续解析html页面 --- 会阻塞页面解析以及其他下载线程以及渲染线程;
-
遇到async 的脚本,异步加载,加载不会阻碍页面解析。加载完立即执行,执行会阻塞页面解析 - (当然若加载完成时html已经解析完成,那么就不存在阻碍解析情况了);
-
遇到defer脚本,异步加载,加载不会阻碍页面解析,开始执行时机在dom解析之后,DOMContentLoaded执行之前,执行时页面已经解析完成
其他资源
- img加载不会阻塞html的解析,但img加载后并不渲染,它需要等待Render Tree生成完后才和Render Tree一起渲染出来
注意:页面中所有资源加载完成时,load事件才会触发