理解 CSS 渲染

Question

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

Answer 1

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

确实，在这种情况下应该会发生这种情况，只是浏览器在渲染之前不会等待所有资源都加载完毕。

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

浏览器可以很好地构建CSSOM，但仍然缺少资源，例如，它绝对不需要加载所有背景图像资源来计算元素的框位置。
实际上，它甚至可能需要在构建 DOM 后立即构建 CSSOM，因为在以下 sn-p 的情况下，您需要 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>