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所需的所有样式（通常是首页上所有内容所需的样式），将它们内联到文档的