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

Question

为了构建渲染树，浏览器需要 DOM 和 CSSOM。 CSSOM 只能在下载 CSS 后构建。从本质上讲，一旦 CSS 下载完毕，页面就应该可以正确呈现了。但是，为什么我们会在页面上看到 Flash Of Unstyled Content(FOUC)？浏览器在什么时间窗口显示无样式的内容？

请帮助我理解这一点。

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

Answer 1

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

我发现这篇 Google 文章乍一看有些令人困惑，但如果我们仔细查看以下声明，它就会变得不那么矛盾:

“如果我们尝试在 CSS 上不阻塞渲染渲染一个典型页面会发生什么？”。 (然后以纽约时报 FOUC 作为行为示例不阻止渲染。)

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

例如根据this ancient article如果某些 JS 试图访问具有布局/样式信息的属性，我们可能会在 web kit 中遇到 FOUC。

Web Kit has the opposite behavior and will continue parsing a page even after a style sheet directive has been encountered so that style sheet and script loads can be parallelized. That way everything can be ready for display much earlier.

The problem with this behavior is what to do when a script attempts to access a property that involves having accurate layout/style information to answer. Shipping Safari’s current behavior when this happens is as follows: it will go ahead and lay out what it’s got even though it doesn’t have the style sheet yet. It will also display it. This means you see FOUC whenever a script tries to access properties like scrollHeight or offsetWidth before the style sheet has loaded.

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