CSS如何阻止渲染？

问题描述 投票：0回答：2

我仍然无法理解“ CSS is render-blocking”]的概念。我非常了解JS如何解析器阻止。但是，前者对我来说仍然有点不清楚。

让我们举个例子：

index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Some Document</title>
  <link href='cdn1.com/styles1.css' rel="stylesheet"/>
  <link href='cdn2.com/styles2.css' rel="stylesheet"/>
</head>
<body>
   ...
   ...
</body>
</html>

style1.css（来自CDN1）：
body { background: blue }

style2.css（来自CDN2）：
body { background: red }

现在，假设来自cdn1的style1.css花了1秒
，而来自cdn2的style2花了500ms。我想知道最终用户会在以下时间轴之间在浏览器中看到所有的事情：
  1. 在时间T <500ms：会不会有一个FOUC或空白页，因为CSS处于渲染阻止状态，并且直到我们拥有styles1.css文件后，才会构造渲染树]]
  2. 在时间500ms 处是否会有红页（由于style2.css已加载），FOUC或由于第1点中提到的原因而还是空白页。

    3. 此外，结果在所有浏览器（主要是Edge，Chrome，Firefox和Safari）上是否一致？

我仍然无法非常清楚地理解“ CSS是渲染块”的概念。我非常了解JS如何解析器阻止。但是，前者对我来说还不清楚。让我们以...

html css google-chrome browser rendering
2个回答
0
投票

您需要知道的是“ CSS对象模型”。 CSS的渲染与JS的渲染不同。当所有CSS被下载后，“主树”被创建，并决定对于所有inline CSS, internal CSS, external CSS-将应用哪些最终规则。

此最后的树称为https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model

0
投票

以下示例使用故意延迟的资源来说明会发生什么。因为它每次都使用动态资源来显示不同的ID并提供缓存清除功能，所以我无法使用堆栈代码段，但我将向您展示关键代码和指向工作示例的链接。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.