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

Question

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

请帮助我理解这一点。

参考： https://developers.google.com/web/fundamentals/performance/ritic-rendering-path/render-blocking-css

Answer 1

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

\n\n

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

\n\n

\xe2\x80\x9c如果我们尝试在不阻止 CSS 渲染的情况下渲染典型页面，会发生什么？\xe2\x80\x9d。（然后纽约时报 FOUC 作为不阻塞渲染的行为示例的行为示例。）

\n\n

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

\n\n

例如，根据这篇古老的文章，如果某些 JS 尝试访问具有布局/样式信息的属性，我们可能会在 Web Kit 中遇到 FOUC。

\n\n

\n

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

\n\n

此行为的问题是当脚本尝试访问涉及要回答的准确布局/样式信息的属性时该怎么办。当发生这种情况时，传送 Safari\xe2\x80\x99s 当前的行为如下：它将继续并列出它\xe2\x80\x99s 得到的内容，即使\n 虽然它没有\xe2\x80\x99s 的样式床单还没有。它还会显示它。\n 这意味着每当脚本在加载样式表之前尝试访问属性\n（如 \xc2\xa0scrollHeight\xc2\xa0 或 \xc2\xa0offsetWidth\xc2\xa0）时，你就会看到 FOUC。

\n

\n\n

因此，当我们说\xe2\x80\x9cFOUC发生\xe2\x80\x9d时，应该说明\n什么情况下以及在什么浏览器中发生它，因为它不\xe2\x80\x99t\n\xe2\x80\x9cjust\ xe2\x80\x9d 随处可见。

\n

Answer 2

这应该有帮助。

1. DOM 已构建
2. 如果我们还在等待 CSSOM 构建完成，那么我们会看到 FOUC
3. CSSOM 已构建
4. DOM 和 CSSOM 合并到渲染树中，渲染树使用 CSS（样式内容）渲染 DOM

所以浏览器在等待 CSS 时会显示 FOUC。一旦加载了 CSS，DOM 和 CSSOM 就会合并成一棵树，称为渲染树，这就是样式内容。

HTML 渲染为无样式这一事实清楚地表明 HTML 可以与渲染树分开在浏览器中渲染，从而导致 FOUC。

根据 Google 文章，《纽约时报》网站显示 FOUC 直到 CSSOM 构建完成，然后渲染渲染树。这表明渲染渲染树与渲染 DOM 树不同。DOM 树已渲染，但卸载的 CSS 会阻止渲染树被渲染（请注意区别）。这就是为什么 FOUC 在 CSS 解锁和渲染树显示之前显示。

在我看来，这是关于这个主题最全面的演讲，来自 Mozilla 首席工程师 David Baron： https: //vimeo.com/103108124