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所需的全部样式（一般是首页上全部内容所需的样式），将它们内联到文档的< style >标记中< head >，并从关键路径异步加载剩余的样式表。 虽然这种策略是有效的，但并不简单：高度动态的网站很难从中提取样式; 这个过程须要自动化; 咱们必须对全部的内容作出假设; 抓住边缘状况很难; 工具仍处于相对初期阶段。若是正在使用大型或遗留代码库，事情变得更加困难......

拆分媒体类型

所以，若是实现关键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);
复制代码

咱们最终获得了这样的瀑布：

明确缺少关键路径上的并行化。 经过简单地将其展平为两个< link rel="stylesheet" />零和零 @import：

<link rel="stylesheet" href="all.css" />
<link rel="stylesheet" href="imported.css" />
复制代码

咱们获得一个更健康的瀑布：

开始并行化咱们的关键路径CSS。 若是你没法访问包含@import （意味着你没法删除）的CSS文件，你能够放心地将其保留在CSS中，但也可使用< link rel="stylesheet" /> HTML中的相应内容对其进行补充。这意味着浏览器将从HTML启动导入的CSS下载，并将跳过@import：你将不会得到任何双重下载。