gpt4 book ai didi

html - CSS 如何阻止渲染?

转载 作者:行者123 更新时间:2023-12-03 08:47:37 26 4
gpt4 key购买 nike

我仍然无法清楚地理解“CSS 是渲染阻塞”这个概念。我确实非常了解 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 加载时间为 500 毫秒。我想知道最终用户在以下时间线之间会在浏览器中看到发生的所有事情:

  1. 在时间T < 500ms:是否会出现 FOUC 或空白页面,因为 CSS 是渲染阻塞的,并且在我们拥有 styles1.css 文件之前不会构建渲染树
  2. 在时间 500ms < T < 1sec: 是否会出现红色页面(因为 style2.css 已加载)、FOUC 或由于第 1 点中提到的原因仍然是空白页面。

此外,结果在每个浏览器(主要是 Edge、Chrome、Firefox 和 Safari)上是否一致?

最佳答案

以下示例使用故意延迟的资源来显示发生的情况。因为它使用动态资源每次显示不同的 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 秒后出现。脚本加载解析器 block ,因此第二个 css 资源尚未解析,因此它无法阻止渲染。因此,看到蓝色背景。然后脚本加载,第二个 css 资源被解析,渲染 block 直到它也被加载,此时背景从蓝色变为红色。

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

关于html - CSS 如何阻止渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60774978/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com