CSS不会阻塞DOM解析,但会阻塞DOM渲染。CSS会阻止JS执行,但不会阻止JS文件下载。CSSOM的作用:为JS提供操作样式表的能力;为布局树的合成提供基本样式信息。CSSOM在DOM中反映为document.styleSheets。DOM和CSSOM通常是并行构建的,所以css加载不会阻塞DOM解析。但是由于RenderTree依赖DOMTree和CSSOMTree,所以必须等到两者都加载完毕,对应的构建完成后,才会开始渲染。因此,CSS加载会阻塞DOM渲染。因为JS可以操作DOM和CSS样式。如果在修改这些元素属性的同时渲染界面(即JS线程和UI线程同时运行),渲染线程前后获取的元素数据可能不一致。所以,为了防止渲染结果不可预知,浏览器将GUI渲染线程和JS引擎设置为互斥。有时JS需要等到CSS下载完成,这是为什么?如果脚本的内容是获取元素的样式,宽高等CSS控制的属性,需要浏览器自己计算,也就是依赖于CSS。浏览器无法感知脚本的内容是什么。为了避免样式获取,只有在前面的样式都下载完后,才能执行JS。JS文件下载和CSS文件下载是并行的,有时CSS文件很大,所有JS都需要等待。因此,样式表会在后续JS执行之前加载并执行,所以CSS会阻塞后续JS的执行。
