CSS块如何渲染

我仍然无法很清楚地理解“CSS 是 render-blocking”的这个概念。我确实很好地理解 JS 是如何解析器阻塞的。但是,前者对我来说还是有点不清楚。

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

以下示例使用故意延迟的资源来显示发生了什么。因为它使用动态资源每次显示不同的 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 资源并主动获取它,即使它不能使用它,直到解析器解锁。

0

你需要知道的是“CSS 对象模型”。CSS 的 Rending 与 JS 的 Rending 不一样。当所有的 CSS 被下载“一个主树”,并决定对于所有inline CSS, internal CSS, external CSS-将应用的最终规则是什么。

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

使用 SPA(单页应用程序)如 Angular,React,Vue 等的好处是整个页面不会刷新,因此各种步骤如下:

重新加载 HTML Dom

重新加载 CSS 文件

制作“CSS 对象模型”

将“此 CSS 模型”映射到 HTML-Doms

得救了,这就是为什么这些更快。

希望,这有点帮助!

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(465)
如何在不使用autorun.inf的情况下从usb自动运行.exe文件
上一篇
替代Firefox的Firebug
下一篇

相关推荐

  • css参考手册:标题

    CSS参考手册是一本关于CSS语言的参考书,由W3C组织出版,包含了CSS语言的完整语法、属性、值和案例等。它提供了一个完整的CSS语言参考,可以帮助开发者快速学习和使用CSS语言,从而更好地创建网页。…

    2023-06-29 01:40:51
    0 72 51
  • css登录界面模板代码:登录你的账号,开启新的旅程

    CSS登录界面模板代码是一种使用CSS来制作登录界面的代码,它可以帮助开发者快速制作出美观且易于使用的登录界面,以下是一个简单的CSS登录界面模板代码:…

    2023-05-06 06:17:54
    0 81 55
  • html引用css文件:My Webpage Welcome to My Webpage!

    示例示例在html文件中引用css文件,可以使用标签,代码示例如下:其中,rel属性表示关系,type属性表示文件的类型,href属性表示css文件的路径。…

    2023-06-21 12:33:03
    0 58 39
  • css鼠标移入移出:标题

    CSS鼠标移入移出,可以使用CSS中的:hover伪类来实现,代码如下:上面的代码表示,当鼠标移入.example元素时,将其文字颜色改为白色。…

    2023-04-28 12:13:20
    0 55 45
  • css自动换行:标题

    CSS自动换行可以使用CSS的word-wrap属性来实现,代码如下:该属性有两个可选值:…

    2023-11-21 11:03:53
    0 66 32
  • css布局技巧:和3个段落 标题 段落1 段落2 段落3

    CSS布局技巧是指使用CSS来实现页面布局的方法。这些技巧可以帮助开发人员快速实现页面布局,并且可以更好地控制页面的外观和行为。…

    2023-04-17 01:31:53
    0 34 61
  • css 超出自动换行:这是一个标题

    css 超出自动换行,可以使用 css 的 word-wrap 属性来实现,该属性允许长单词或 URL 地址换行到下一行。代码如下:…

    2023-04-08 01:41:59
    0 58 95
  • css出现滚动条控制页面内容的浏览

    当页面内容超出浏览器窗口的大小,会出现滚动条,可以通过CSS来控制。例如:…

    2023-06-05 08:29:43
    0 32 23

发表评论

登录 后才能评论

评论列表(22条)