css加载是否会阻塞dom树渲染

时间:2023-03-10 04:28:30
css加载是否会阻塞dom树渲染

这里说的是头部引入css的情况

首先,我们都知道:css是由单独的下载线程异步下载的。

咱们先分析下css加载会影响什么,刚才的问题太笼统了,咱们需要细化一下。

会影响什么呢? 一个就是DOM树解析,一个就是构建渲染树【render树】。

假设都不影响。

这个时候你加载css的时候,很可能会修改下面DOM节点的样式,
如果css加载不阻塞render树渲染的话,那么当css加载完之后,
render树可能又得重新重绘或者回流了,这就造成了一些没有必要的损耗。所以这个假设是不成立得。

另外不影响dom树的解析和构建,本来dom树的解析和构建这一步和css还没有关系,所以根本谈不上影响吧。而且是两个不同的线程,各忙各的呗。

所以干脆就先把DOM树的结构先解析完,把可以做的工作做完,然后等你css加载完之后,
在根据最终的样式来渲染render树,这种做法性能方面确实会比较好一点。

所以我们得出结论

  • css加载不会阻塞DOM树解析(异步加载时DOM照常构建)

  • 但会阻塞render树渲染(渲染时需等css加载完毕,因为render树需要css信息)

这可能也就是浏览器的一种优化机制。

还有一种情况是 css资源一直没响应,那页面会事怎样呢?这个留个作业,可以自己试试,有结果了给我留言吧。