浏览器是否在 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 已被解析并正在等待其他资源加载的时候。
更多信息:
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
浏览器是否在 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 已被解析并正在等待其他资源加载的时候。
更多信息:
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp