关于前端: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的执行。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理