CSS和网络性能
CSS对于呈现页面至关重要 - 在找到、下载和解析所有CSS之前,浏览器不会开始呈现 - 因此我们必须尽可能快地将其放到用户的设备上。关键路径上的任何延迟都会影响我们的“开始渲染”,并让用户看到空白屏幕。
什么是大问题?
从广义上讲,这就是CSS对性能至关重要的原因:
- 浏览器在构建渲染树之前无法渲染页面;
- 渲染树是DOM和CSS组合结果;
- DOM是HTML加上需要对其进行操作的JavaScript; DOM是HTML加上需要对其进行操作的JavaScript;
- CSS是针对DOM应用的所有CSS规则; CSS是针对DOM应用的所有CSS规则;
- 使用async和defer 属性很容易使JavaScript无阻塞;使用async和defer 属性很容易使JavaScript无阻塞;
- 使CSS异步变得困难得多;使CSS异步变得困难得多;
- 所以要注意的一个好的经验法则是,页面只会像最慢的样式表一样快速地呈现。
考虑到这一点,我们需要尽快构建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性能来说真的非常糟糕。这是因为我们正在关键路径上积极创建更多往返:
- 下载HTML;
- HTML请求CSS;
- CSS请求更多CSS;
- 构建渲染树。
给出以下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:你将不会获得任何双重下载。