CSS和网络性能

CSS和网络性能

CSS对于呈现页面至关重要 - 在找到、下载和解析所有CSS之前，浏览器不会开始呈现 - 因此我们必须尽可能快地将其放到用户的设备上。关键路径上的任何延迟都会影响我们的“开始渲染”，并让用户看到空白屏幕。

什么是大问题？

从广义上讲，这就是CSS对性能至关重要的原因：

1. 浏览器在构建渲染树之前无法渲染页面;
2. 渲染树是DOM和CSS组合结果;
3. DOM是HTML加上需要对其进行操作的JavaScript; DOM是HTML加上需要对其进行操作的JavaScript;
4. CSS是针对DOM应用的所有CSS规则; CSS是针对DOM应用的所有CSS规则;
5. 使用async和defer 属性很容易使JavaScript无阻塞;使用async和defer 属性很容易使JavaScript无阻塞;
6. 使CSS异步变得困难得多;使CSS异步变得困难得多;
7. 所以要注意的一个好的经验法则是，页面只会像最慢的样式表一样快速地呈现。

考虑到这一点，我们需要尽快构建DOM和CSS。在大多数情况下，构建DOM相对较快：第一个HTML响应是 DOM。但是，由于CSS几乎总是HTML的子资源，因此构建CSS通常需要更长的时间。
在这篇文章中，我们主要来看看如何证明CSS在网络上是一个重要的瓶颈（本身和其他资源），以及我们如何减轻它，从而缩短关键路径并缩短开始渲染的时间。

使用关键CSS

如果你有能力，减少Start Render时间的最有效方法之一是使用Critical CSS模式：识别Start Render所需的所有样式（通常是首页上所有内容所需的样式），将它们内联到文档的

拆分媒体类型

因此，如果实现关键CSS非常棘手 - 它可能是另一种选择，我们将主要的CSS文件拆分为其各自的媒体查询。这样做的实际结果是浏览器会…

• 以非常高的优先级下载当前上下文所需的任何CSS（中等，屏幕大小，分辨率，方向等），阻止关键路径;
• 以非常低的优先级下载当前上下文不需要的任何CSS，完全脱离关键路径。

基本上，浏览器有效地延迟了不需要渲染当前视图的任何CSS。

<link rel="stylesheet" href="all.css" />

如果我们将所有CSS捆绑到一个文件中，这就是网络对待它的方式：

请注意，单个CSS文件具有最高优先级。
如果我们可以将单个全渲染阻塞文件拆分为各自的媒体查询：

<link rel="stylesheet" href="all.css" media="all" />
<link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />

然后我们看到网络以不同方式处理文件：

不需要渲染当前上下文的CSS文件被赋予最低优先级。
浏览器仍将下载所有CSS文件，但它只会阻止渲染完成当前上下文所需的文件。

避免@import在CSS文件中

我们可以做的下一件事就是帮助Start Render更加简单。避免@import在CSS文件中使用。
@import，凭借它的工作原理，它很慢。对于Start Render性能来说真的非常糟糕。这是因为我们正在关键路径上积极创建更多往返：

1. 下载HTML;
2. HTML请求CSS;
3. CSS请求更多CSS;
4. 构建渲染树。

给出以下HTML：

<link rel="stylesheet" href="all.css" />

all.css是：

@import url(imported.css);

我们最终得到了这样的瀑布：

明确缺乏关键路径上的并行化。
通过简单地将其展平为两个零和零 @import：

<link rel="stylesheet" href="all.css" />
<link rel="stylesheet" href="imported.css" />

我们得到一个更健康的瀑布：

开始并行化我们的关键路径CSS。
如果你无法访问包含@import （意味着你无法删除）的CSS文件，你可以放心地将其保留在CSS中，但也可以使用 HTML中的相应内容对其进行补充。这意味着浏览器将从HTML启动导入的CSS下载，并将跳过@import：你将不会获得任何双重下载。