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

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

希望,这有点帮助!

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

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

相关推荐

  • css添加滚动条:标题

    CSS添加滚动条的方法如下:在CSS中添加属性:…

    2022-12-30 13:40:10
    0 75 56
  • css预处理器有哪些Sass、Less 和 Stylus

    CSS预处理器是一种用于构建CSS的工具,它可以帮助开发人员更轻松、更有效地创建和维护CSS代码。它们使用特殊的语法,可以添加变量、函数、继承和混合等功能,以帮助开发人员更轻松地编写CSS。…

    2023-01-18 11:57:40
    0 22 62
  • css属性选择器怎么用: bold;}`

    CSS属性选择器是一种CSS选择器,用于通过元素的属性和属性值来选择元素。它们可以与其他CSS选择器结合使用,以提供更多的灵活性和精确度。…

    2023-01-16 03:10:51
    0 49 26
  • css取消超链接下划线:Welcome to my page

    可以使用CSS的text-属性来取消超链接的下划线,代码如下:…

    2022-12-31 09:48:32
    0 11 42
  • css 时钟:时间在流逝,但美丽永恒

    CSS时钟是一种使用CSS和JavaScript创建的时钟。它可以使用CSS来控制时钟的外观,而JavaScript可以控制时钟的行为。要创建一个CSS时钟,首先需要创建一个div,并将其设置为一个圆形:…

    2023-01-29 12:42:40
    0 66 72
  • css项目:使用CSS进行网页设计

    CSS(Cascading Style Sheets)是一种用于定义HTML元素的样式表语言。它可以让你为网页中的文本、图像和其他内容指定颜色、字体、大小、位置和其他样式。…

    2023-01-19 06:32:31
    0 66 77
  • cssci核心期刊发表:探索中国社会和文化变迁的影响因素

    CSSCI核心期刊发表是指在中国社会科学引文索引(CSSCI)认可的期刊上发表文章。CSSCI是由中国社会科学院社会科学文献出版社主办的一个社会科学文献数据库,它收录了全球社会科学文献,包括学术期刊、学位论文、研究成果、科技报告等。…

    2023-01-10 07:24:22
    0 18 79
  • css 自适应宽度:标题

    示例示例CSS自适应宽度是指当浏览器的窗口大小发生变化时,元素的宽度也会自动发生变化,从而使元素的布局保持一致。代码示例:…

    2023-01-07 13:02:38
    0 53 35

发表评论

登录 后才能评论

评论列表(68条)