默认情况下，CSS 被视为阻塞渲染的资源，这意味着，只有在构建 CSSOM 之后，浏览器才会渲染任何已处理的内容。请务必精简 CSS，尽快提供它，并利用媒体类型和查询来恢复呈现。
在渲染树构建中，我们看到关键渲染路径同时需要 DOM 和 CSSOM 才能构建渲染树。这会对性能造成重大影响：HTML 和 CSS 都是阻塞渲染的资源。HTML 是显而易见的，因为如果没有 DOM，我们将没有任何内容要呈现，但 CSS 要求可能就不那么显而易见了。如果我们尝试在不阻止 CSS 渲染的情况下渲染典型网页，会发生什么情况？
摘要
- 默认情况下，CSS 被视为阻塞渲染的资源。
- 利用媒体类型和媒体查询，我们可以将一些 CSS 资源标记为不阻塞渲染。
- 浏览器会下载所有 CSS 资源（无论阻塞行为还是非阻塞行为）。
上例展示了纽约时报网站使用和不使用 CSS 的情形，表明了为什么在 CSS 可用之前阻塞渲染，即没有 CSS 页面就相对无法使用。右侧的情况通常称为“内容样式短暂失效”(FOUC)。浏览器将阻塞渲染，直至 DOM 和 CSSOM 全都可见。
CSS 是一种阻塞渲染的资源。需要尽快将其分发给客户端，以缩短首次渲染的时间。
但是，如果我们有一些 CSS 样式仅在特定条件下（例如，打印网页或将网页投影到大型显示器上时）使用，该怎么办？如果这些资源不阻塞渲染，该有多好。
CSS“媒体类型”和“媒体查询”让我们能够满足以下用例：
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
媒体查询由媒体类型以及零个或多个检查特定媒体功能状况的表达式组成。例如，我们的第一个样式表声明不提供媒体类型或查询，因此它适用于所有情况；也就是说，它始终会阻塞渲染。另一方面，第二个样式表声明仅在打印内容时适用（或许您想重新排列布局、更改字体等），因此该样式表声明在网页首次加载时不需要阻止其呈现。最后，最后一个样式表声明提供由浏览器执行的“媒体查询”：如果条件匹配，浏览器将阻塞渲染，直到样式表下载并处理完毕。
通过使用媒体查询，我们可以根据特定用例（例如显示与打印）以及动态条件（例如屏幕方向变化、大小调整事件等）定制呈现方式。声明样式表资源时，请特别注意媒体类型和查询，因为它们会严重影响关键渲染路径性能。
我们来看一些实际操作示例：
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- 第一个声明是阻塞渲染，在所有条件中都匹配。
- 第二个声明同样会阻塞渲染：“all”是默认类型，因此如果您未指定任何类型，系统会将其隐式设置为“all”。因此，第一个声明和第二个声明实际上是等效的。
- 第三个声明具有动态媒体查询，在网页加载时计算。根据网页加载时设备的屏幕方向，portrait.css 可能阻塞渲染，也可能不阻塞渲染。
- 最后一个声明仅在打印网页时应用，因此网页首次在浏览器中加载时不会阻塞渲染。
最后请注意，“阻塞渲染”仅是指浏览器是否必须等待网页在该资源上的初次渲染。无论哪种情况，浏览器仍会下载 CSS 资源，只不过非阻塞资源的优先级较低。