了解 CSS 渲染

Question

所以我到处读到CSS是渲染阻塞。尽管这与<script>标记引起的阻塞不同，因为它不会暂停HTML的解析。浏览器基本上等待CSSOM被构建，然后只向网页呈现任何内容。因此，当 CSS 加载延迟时，它可能会影响网页的加载时间。但我不明白的是，如果是这种情况，FOUC(无样式内容的闪光(是如何引起的？FOUC 基本上是当浏览器暂时显示没有样式的 HTML，然后当 CSS 可用时，它显示样式正确的页面。因此，如果浏览器总是在渲染任何内容之前等待 CSS 被加载和解析，那么 FOUC 就不会发生。

Answer 1

如果浏览器总是在渲染任何内容之前等待CSS被加载和解析，那么FOUC应该不会发生。

事实上，在这种情况下应该发生这种情况，除了浏览器在渲染之前不会等待所有资源加载。

请注意，这与你"到处阅读"的内容并不矛盾，如果你真的读过">浏览器基本上等待CSSOM被构建，然后只向网页呈现任何内容。

浏览器可以很好地构建CSSOM，同时它仍然缺少资源，例如，它绝对不需要加载所有背景图像资源来计算元素的框位置。
实际上，它甚至可能需要在构建 DOM 后立即构建 CSSOM，因为在以下代码片段中，您需要 CSSOM 才能使 js 工作：

<h1>test</h1>
<script>
// without CSSOM, we couldn't get its width yet
console.log(document.querySelector('h1').offsetWidth);
</script>
<style>
/* even if it's gonna be invalidated later on */
h1 { width: 300px; border:1px solid; } 
</style>