了解CSS渲染

Question

所以我到处都读到CSS是render block。尽管这与<script>标记引起的阻止不同，因为它不会暂停HTML的解析。浏览器基本上等待CSSOM生成，然后仅将任何内容呈现给网页。因此，CSS加载较晚时，可能会影响网页的加载时间。但是我不明白的是，如果是这种情况，FOUC（未样式化内容的Flash）是如何引起的？ 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>