CSS对于呈现页面至关重要 - 在找到、下载和解析所有CSS之前，浏览器不会开始呈现 - 因此我
必须尽可能快地将其放到用户的设备上。关键路径上的任何延迟都会影响我们的“开始渲染”，并让用户看到空白屏幕。
什么是大问题？
从广义上讲，这就是CSS对性能至关重要的原因：
- 浏览器在构建渲染树之前无法渲染页面;
- 渲染树是DOM和CSS组合结果;
- DOM是HTML加上需要对其进行操作的JavaScript;
- CSS是针对DOM应用的所有CSS规则;
- 使用async和defer 属性很容易使JavaScript无阻塞;
- 使CSS异步变得困难得多;
- 所以要注意的一个好的经验法则是，页面只会像最慢的样式表一样快速地呈现。
考虑到这一点，我们需要尽快构建DOM和CSS。在大多数情况下，构建DOM相对较快：第一个HTML响应是 DOM。但是，由于CSS几乎总是HTML的子资源，因此构建CSS通常需要更长的时间。
在这篇文章中，我们主要来看看如何证明CSS在网络上是一个重要的瓶颈（本身和其他资源），以及我们如何减轻它，从而缩短关键路径并缩短开始渲染的时间。
使用关键CSS
如果你有能力，减少Start Render时间的最有效方法之一是使用Critical CSS模式：识别Start Render所需的所有样式（通常是首页上所有内容所需的样式），将它们内联到文档的<style>标记中<head>，并从关键路径异步加载剩余的样式表。
虽然这种策略是有效的，但并不简单：高度动态的网站很难从中提取样式; 这个过程需要自动化; 我们必须对所有的内容做出假设; 抓住边缘情况很难; 工具仍处于相对初期阶段。如果正在使用大型或遗留代码库，事情变得更加困难......
拆分媒体类型
因此，如果实现关键CSS非常棘手 - 它可能是另一种选择，我们将主要的CSS文件拆分为其各自的媒体查询。这样做的实际结果是浏览器会......
- 以非常高的优先级下载当前上下文所需的任何CSS（中等，屏幕大小，分辨率，方向等），阻止关键路径;
- 以非常低的优先级下载当前上下文不需要的任何CSS，完全脱离关键路径。
基本上，浏览器有效地延迟了不需要渲染当前视图的任何CSS。
| 1 | <link rel="stylesheet" href="all.css" /> |
如果我们将所有CSS捆绑到一个文件中，这就是网络对待它的方式：
请注意，单个CSS文件具有最高优先级。
如果我们可以将单个全渲染阻塞文件拆分为各自的媒体查询：
