浏览器是否在 CSS 文件加载时解析 CSS?

Do browsers parse CSS on CSS file loading?

浏览器是否在 CSS 文件加载时解析 CSS?或者在整个 CSS 文件被浏览器下载后完成解析?不同浏览器的做法有区别吗?我在哪里可以找到这种低级信息?

这个问题不是Load and execution sequence of a web page?问题的重复,因为它只涉及CSS下载/解析部分,而在相关问题中没有详细描述同步/异步的答案CSS 文件下载/解析中。

浏览器依赖渲染引擎,例如 Webkit/Trident/Quantum。有关 CSS-rendering 的 low-level 信息,您可以阅读特定渲染引擎的文档。他们大多是 open-source.

CSS 与 HTML 一起是渲染阻塞资源。浏览器需要它来构建渲染树。所以是的,它在下载后立即转换为 CSSOM。

在某些情况下 CSS 不会立即被解析,例如,如果将它们添加为打印样式表:<link href="print.css" rel="stylesheet" media="print">。在那种情况下,只有当页面被打印时它们才会被解析。

如果您正在使用 Chrome 开发者工具,您实际上可以自己尝试。

红线表示加载事件,即所有元素都已下载和解析的时间。深绿色部分是 CSS 已被解析并正在等待其他资源加载的时候。

更多信息: