如果 CSS 是渲染阻塞的，为什么我们会看到 FOUC？

为了构建渲染树，浏览器需要 DOM 和 CSSOM。 CSSOM 只有在下载 CSS 后才能构建。本质上，一旦下载了 CSS，页面就应该可以正常渲染了。但是，为什么我们会在页面上看到 Flash Of Unstyled Content（FOUC）呢？浏览器在什么时间窗口显示无样式内容？

请帮助我理解这一点。

Ref: https://developers.google.com/web/fundamentals/performance/ritic-rendering-path/render-blocking-css https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

我仍然不同意已接受的答案，因为根据关键渲染路径，在正常情况下，在构建渲染树（DOM + CSSOM）之前，无法在屏幕上绘制任何内容。

我发现谷歌的这篇文章乍一看有些令人困惑，但如果我们仔细看看下面的陈述，它就会变得不那么矛盾：

“如果我们尝试渲染一个典型的页面会发生什么不阻塞渲染CSS 上？”。 （然后纽约时报 FOUC 作为行为的例子不阻塞渲染如下。）

从历史上看，FOUC 在不同的浏览器版本和不同的情况下由于不同的原因发生过。

例如根据这篇古文 https://webkit.org/blog/66/the-fouc-problem/如果某些 JS 尝试访问具有布局/样式信息的属性，我们可能会在 Web Kit 中遇到 FOUC。

Web Kit 具有相反的行为，将继续解析页面 即使遇到样式表指令后，样式 工作表和脚本加载可以并行化。这样一切都可以 更早准备好展示。

此行为的问题是当脚本尝试执行以下操作时该怎么办 访问涉及准确布局/样式的属性 信息来回答。在此情况下传送 Safari 的当前行为 发生的情况如下：它将继续并列出它所得到的东西 虽然它还没有样式表。它也会显示它。 这意味着每当脚本尝试访问属性时您都会看到 FOUC 例如加载样式表之前的scrollHeight 或offsetWidth。

因此，当我们说“FOUC发生”时，应该有解释 它会在什么情况下以及在什么浏览器中发生，因为它不会 “只是”无处不在。