Question

我仍然无法很清楚地理解“CSS 是 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 }

现在，让我们假设 style1.css 从 cdn1 花了1 秒加载，而 style2 从 cdn2 花了500ms。

在时间T ＆ lt;500ms：会有一个 FOUC 或一个空白页，因为 CSS 是渲染块，渲染树不会构造，直到我们有 styles1.css 文件

在时间500ms ＆ lt;T ＆ lt;1sec：是否会有一个红色页面（因为 style2.css 已经加载），FOUC 或仍然是空白页，原因在第 1 点。

此外，结果是否会在每个浏览器上保持一致，主要是 Edge，Chrome，Firefox 和 Safari？

3

0

Answer 1

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

在第一个例子中，我们有你描述的情况。

<!DOCTYPE html>
<html>
<head>
  <title>Render Blocking Test - A</title>
  <link href='/css/styles1.css?delay=1000&x={cachebuster}' rel="stylesheet"/>
  <link href='/css/styles2.css?delay=5000&x={cachebuster}' rel="stylesheet"/>
</head>
<body>
   <h1>Render Blocking Test - A</h1>
   <b>{cachebuster}</b>
</body>
</html>

每次刷新时，占位符“{cachebuster}”将替换为不同的 GUID。两个 CSS 资源的延迟分别为 1 秒和 5 秒，以便更清楚地显示延迟

styles1.css 包含

body { background: blue }

styles2.css 包含

body { background: red }

看到它在这里工作：http://alohci.net/text/html/render-blocking-a.htm

您将看到页面是空白的，直到 5 秒过去，并且所有的 css 资源都已下载。或者在刷新时，上一页保持显示，直到 5 秒过去（GUID 在 5 秒后更改）。当它和新内容出现时，背景立即为红色，而不是白色或蓝色。这就是阻止渲染的含义-在渲染阻止资源可用之前，不会完成页面的新渲染。

为了进行比较，请参见第二个示例。

<!DOCTYPE html>
<html>
<head>
  <title>Render Blocking Test - B</title>
  <link href='/css/styles1.css?delay=1000&x={cachebuster}' rel="stylesheet"/>
</head>
<body>
   <h1>Render Blocking Test - B</h1>
   <b>{cachebuster}</b>
   <script src="/js/script1.js?delay=4000&x={cachebuster}"></script>
   <link href='/css/styles2.css?delay=5000&x={cachebuster}' rel="stylesheet"/>
</body>
</html>

看到它在这里工作：http://alohci.net/text/html/render-blocking-b.htm

我们在这里得到的是一秒钟的单个渲染阻止资源，然后是一些内容-标题和 GUID-然后是一个需要 4 秒下载的脚本，然后是第二个渲染阻止资源。

在这种情况下，文本和蓝色背景在 1 秒后出现。脚本加载解析器阻塞，因此第二个 css 资源尚未解析，因此它不能阻塞渲染。因此，看到蓝色背景。然后加载脚本，解析第二个 css 资源，并渲染块，直到它也被加载，此时背景从蓝色变为红色。

最后，你可能会注意到红色背景只需要 5 秒，而不是你想象的 9 秒。这是因为解析器仍然可以在解析器被阻止时向前看，认识到它可能需要下载第二个 css 资源并主动获取它，即使它不能使用它，直到解析器解锁。