性能提示：使用 Media 属性加快页面加载时间(什么是 CSS 渲染阻塞？)

有时网络性能优化需要做很多工作，有时性能可以在一瞬间得到提升。将media属性添加到条件 css 文件是加快网页加载时间的一种简单快捷的方法。

TL;博士

简而言之，如果在调用 CSS 文件media的标签中添加属性<link>，就可以将其从“渲染阻塞”资源转变为“非渲染阻塞”资源，从而缩短关键渲染路径。media但是，只有在条件 CSS 文件上使用该属性才有意义。

现在，让我们看看这种超快速性能优化技术是如何工作的。

什么是 CSS 渲染阻塞？

从服务器请求网页时，有两种类型的资源：渲染阻塞和非渲染阻塞资源。渲染阻塞资源对于网页的渲染是必不可少的，因此 Web 浏览器会停止处理其他资源，直到解析渲染阻塞资源。

如果您有太多的渲染阻塞资源，浏览器将需要更长的时间来渲染页面。但是，您可以通过尽可能将渲染阻塞资源转换为非渲染阻塞资源来减少页面加载时间。

默认情况下，html 和 CSS 被视为渲染阻塞资源。HTML 对于正在构建的 dom（文档对象模型）是必不可少的，而 CSS 对于正在构建的 CSSOM（CSS 对象模型）是必不可少的。然而，并不是所有的 CSS 都是渲染页面所必需的。

什么是条件 CSS？

条件 CSS 仅在特定条件下使用。用于移动或打印布局的样式表是条件 CSS 的典型示例。只有当用户在给定条件下加载页面时，这些样式表才是必不可少的资源——例如，在移动设备或打印页面上。

但是，浏览器也将这些条件 CSS 文件视为渲染阻塞资源。media幸运的是，有一种简单的方法可以使用该属性 使它们成为非渲染阻塞。

如何使用媒体属性防止 CSS 渲染阻塞

如果您将media属性添加到<link>标签，相关 CSS 文件将不再被视为渲染阻止资源。

您可以将media属性视为等同于 CSS 媒体查询的 HTML。它可以采用与 CSS 媒体查询相同的值。例如：

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 650px)">

<link href="print.css" rel="stylesheet" media="print">

您还可以将media属性添加到<style>用于内联 CSS 的元素：

<style media="screen and (max-width: 650px)">

    .desktop-banner {

        display: none; 

    }

</style>

该media属性不会阻止下载条件 CSS。浏览器仍会下载这些文件，但它们不会位于关键渲染路径中。因此，页面加载在下载时不会被阻止。 

如果页面在属性中指定的条件下加载（例如，在移动设备或打印页面上），则标记有该属性的条件 CSS 文件media仍将呈现阻塞资源。media但是，在不满足条件的任何其他情况下，它们将是非渲染阻塞。

结论

渲染阻塞可能会很尴尬，但这个简单的小技巧可以减少页面加载的大量时间，并且在网络性能的世界中，每一秒都很重要！今天试试这个技巧，使用下面列出的免费工具之一测试结果，让我们知道它有多大的不同。