CSS加载会造成阻塞吗?

CSS不会阻塞DOM解析,但会阻塞DOM渲染。
CSS会阻塞JS执行,但不会阻塞JS文件下载

CSSOM的作用:

· 提供给JS操作样式表的能力;
· 为布局树的合成提供基础的样式信息。

CSSOM体现在 DOM 中就是 document.styleSheets。

DOM 和 CSSOM 通常是并行构建的,所以css加载不会阻塞DOM的解析。
然而由于 Render Tree是依赖 DOM Tree和 CSSOM Tree的,
所以它必须等到两者都加载完成后,完成相应的构建,才开始渲染。
因此,CSS 加载会阻塞 DOM 渲染。

由于JS是可操纵DOM和CSS样式的。
如果在修改这些元素属性同时渲染界面(即JS线程和UI线程同时运行),
那么渲染线程前后获得的元素数据就可能不一致。
因此为了防止渲染出现不可预期的结果,
浏览器就设置了 GUI渲染线程和JS引擎为互斥的关系。

有时候JS需要等到CSS的下载,这是为什么呢?

如果脚本的内容是获取元素的样式,宽高等CSS控制的属性,
浏览器是需要计算的,也就是依赖于CSS。
浏览器也无法感知到脚本内容到底是什么,
为避免样式获取,因此,
只能等前面所有的样式下载完成后,再执行JS。

JS文件下载和CSS文件下载是并行的,
有时候CSS文件很大,所有JS需要等待。
因此,
    样式表会在后面的JS执行前先加载执行完成,
所以,
    CSS会阻塞后面js的执行。

你可能感兴趣的:(前端css)