1

我有九个不同的 CSS 文件。在浏览器下载所有 CSS 文件之前，我的网站不会加载。主页甚至不需要大多数 CSS。在 JavaScript 中，你可以这样做<script async>，

但是对于样式表，最好的解决方案是什么？

我搜索了以下文章 代码笔

keithclark.co.uk

他们建议使用

  <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

或者

 <head>
        <!-- head content -->
        <link rel="stylesheet" href="style.css" media="bogus">
    </head>
    <body>
        <!-- body content -->
        <link rel="stylesheet" href="style.css">
    </body>
4

1 回答 1

4

默认情况下，CSS 被视为渲染阻塞资源，这意味着浏览器在构建 CSSOM 之前不会渲染任何已处理的内容。确保保持 CSS 精简，尽快交付，并使用媒体类型和查询来解除渲染阻塞。

-- 谷歌开发者

  • 默认情况下，CSS 被视为渲染阻塞资源。
  • 媒体类型和媒体查询允许我们将一些 CSS 资源标记为非渲染阻塞。
  • 浏览器会下载所有 CSS 资源，无论是阻塞还是非阻塞行为。

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 -

于 2017-01-31T06:11:06.860 回答