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

问题描述

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

In order to construct the render-tree, the browser requires both DOM and CSSOM. CSSOM can only be constructed, once the CSS is downloaded. In essence, once the CSS is downloaded the page should be rendered alright. But, why do we see Flash Of Unstyled Content(FOUC) on the page? In what time window does the browser show unstyled content?

请帮助我理解这一点.

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

推荐答案

这应该会有所帮助.

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

所以浏览器在等待 CSS 时会显示 FOUC.加载 CSS 后，DOM 和 CSSOM 将合并为一棵树，称为渲染树，这是样式化内容.

So the browser shows FOUC when waiting for CSS. Once the CSS is loaded, the DOM and CSSOM are merged into one tree, called the Render Tree and this is styled content.

HTML 以无样式呈现这一事实清楚地证明 HTML 可以在浏览器中与呈现树分开呈现，从而导致 FOUC.

根据谷歌的文章，NY Times 站点显示 FOUC，直到 CSSOM 被构建，然后渲染树被渲染.这表明渲染渲染树不同于渲染 DOM 树.DOM 树被渲染，但卸载的 CSS 阻止渲染树被渲染(注意区别).这就是为什么 FOUC 在 CSS 未阻塞和渲染树显示之前显示的原因.

According to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows.

在我看来，这是 Mozilla 首席工程师 David Baron 对此主题最全面的讨论:https://vimeo.com/103108124

In my opinion, this is the most comprehensive talk about this subject out there, from David Baron, Chief Engineer at Mozilla: https://vimeo.com/103108124

这篇关于如果 CSS 是渲染阻塞的，为什么我们会看到 FOUC?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！