Question

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

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

我搜索了以下文章 Code Pen

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>

Answer 1

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

- Google Developers

默认情况下，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可能会也可能不会阻止渲染。
最后一个声明仅在打印页面时应用，因此当首次在浏览器中加载页面时，它不会呈现阻止。

来源 - Render blocking CSS -

加载CSS异步的最佳方法是什么？

1 个答案: