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

roqulrg3 于 2023-03-20 发布在其他

关注(0)|答案(4)|浏览(157)

为了构建渲染树，浏览器需要DOM和CSSOM。CSSOM只能在CSS下载后才能构建。本质上，一旦CSS下载后，页面就应该被渲染好。但是，为什么我们会在页面上看到无样式内容 Flink （FOUC）？浏览器在什么时间窗口显示无样式内容？
请你帮我弄明白。
参考：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

css

来源：https://stackoverflow.com/questions/53220261/if-css-is-render-blocking-why-do-we-see-fouc

4条答案

按热度按时间

r6l8ljro1#

我仍然不同意这个公认的答案，因为根据关键的渲染路径，在正常情况下，在构建渲染树（DOM + CSSOM）之前，不能在屏幕上绘制任何内容。
我发现这篇谷歌文章乍一看有点混乱，但如果我们仔细看看下面的声明，它就不会那么矛盾了：
“如果我们试图呈现一个典型的页面而不阻止CSS上的呈现会发生什么？"。（然后纽约时报FOUC作为行为的例子没有阻止呈现如下。）
历史上，FOUC在不同的浏览器版本和不同的环境下发生的原因是不同的。
例如，根据this ancient article，如果一些JS尝试访问具有布局/样式信息的属性，我们可能会在web套件中遇到FOUC。
Web Kit有相反的行为，即使在遇到样式表指令后也会继续解析页面，这样样式表和脚本加载就可以并行化。这样，一切都可以更早地准备好显示。
这种行为的问题在于，当脚本试图访问一个需要回答准确布局/样式信息的属性时，该怎么做。Safari当前的行为如下：即使它还没有样式表，它也会继续布局它所得到的内容。它也会显示样式表。这意味着每当脚本试图在样式表加载之前访问scrollHeight或offsetWidth等属性时，您都会看到FOUC。
因此，当我们说“FOUC发生”时，应该解释它发生在什么情况下和什么浏览器中，因为它不“只是”到处发生。

赞(0）回复(0）举报 2023-03-20

sqougxex2#

FOUC的基本原因是-〉新的/不同的风格是在元素已经绘制在屏幕上之后应用的。
现在的问题是-〉FOUC是否会在页面加载时发生，并且页面标记本身包含外部css的<link>标记，从高层来看，这不应该发生，因为css是渲染阻塞，并且不应该有任何元素可以在没有计算样式的情况下渲染，但它（FOUC）在某些条件下会在页面加载时发生。
主要原因是dom树的构建是增量的，也就是说，在给定的时间点之前，没有完整的html标记浏览器就可以呈现部分html。
为了理解这一点，让我们以下面的html为例-

<!DOCTYPE html>
<html lang="en">
  <body>
    <100 html tags block 1 />
    <link href="css1" />
    <100 html tags block 2 />
    <link href="css2" />
    <100 html tags block 3 />
    <link href="css3" />
  </body>
</html>

1.前100个标签被转换为dom，并在现有的cssom（从用户代理样式表中构造）的帮助下呈现树，树将被绘制并对用户可见。
1.在此之后，解析将被阻止，直到下载了css 1并使用useragent+ css 1样式创建了新的cssom。
1.使用新的渲染树（通过旧dom +新cssom形成），将更新html块1（FOUC）
1.然后，当html块2在那之后被下载时，类似地处理html块2。
1.现在对块2和块3重复与步骤3相同的事情
1.同样的过程一直持续到文档的结尾
学分-https://medium.com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969

赞(0）回复(0）举报 2023-03-20

bxjv4tth3#

这应该有帮助。
1.构建DOM
1.如果我们仍在等待CSSOM的建造，那么我们将看到FOUC
1.构建了CSSOM

DOM和CSSOM合并成渲染树，渲染树使用CSS（样式化内容）渲染DOM
所以浏览器在等待CSS的时候会显示FOUC。一旦CSS被加载，DOM和CSSOM就合并成一个树，叫做渲染树，这就是样式化的内容。

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

根据Google文章，纽约时报网站显示FOUC，直到构造CSSOM，然后呈现呈现树。这表明呈现呈现树不同于呈现DOM树。DOM树被呈现，但卸载的CSS阻止呈现树被呈现（注意区别）。这就是为什么FOUC在CSS被解锁和呈现树显示之前显示的原因。
在我看来，这是Mozilla首席工程师大卫Baron关于这个主题的最全面的演讲：https://vimeo.com/103108124

赞(0）回复(0）举报 2023-03-20

9jyewag04#

你需要仔细阅读这篇文章：
上面的例子显示了带有和不带有CSS的NYTimes网站，演示了为什么在CSS可用之前呈现被阻止---没有CSS，页面相对来说是不可用的
这个截图并不是浏览器中实际发生的事情，它是为了演示如果CSS没有渲染阻塞会发生什么。你最初的理解是正确的，FOUC在正常情况下是不可能的。但是，如果你在页面的后面或者通过Javascript应用了额外的样式，你需要确保它们在任何受这些样式影响的HTML之前被注入，以防止FOUC。

赞(0）回复(0）举报 2023-03-20

我来回答

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

4条答案

相关问题

热门标签

最新问答