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

Question

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

我有九个不同的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'">

Run Code Online (Sandbox Code Playgroud)

要么

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

eir*_*ios 5

默认情况下,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)">

Run Code Online (Sandbox Code Playgroud)

通过使用媒体查询,我们可以根据特定用例(例如显示与打印)以及动态条件(如屏幕方向的更改,调整大小事件等)来定制演示文稿.声明样式表资产时,请密切关注媒体类型和查询; 它们极大地影响了关键渲染路径性能

让我们考虑一些动手实例:

<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">

Run Code Online (Sandbox Code Playgroud)

第一个声明是渲染阻塞和所有条件下的匹配.
第二个声明也是渲染阻塞:"all"是默认类型,所以如果你没有指定任何类型,它会隐式设置为"all".因此,第一和第二声明实际上是等同的.
第三个声明具有动态媒体查询,在加载页面时对其进行评估.根据加载页面时设备的方向,portrait.css可能会也可能不会呈现阻止.
最后一个声明仅在打印页面时应用,因此当首次在浏览器中加载页面时,它不会呈现阻止.

来源 - 渲染阻止CSS -

有一个名为Preload(aka rel = preload)的新浏览器功能,它允许我们开始获取CSS但阻止它阻塞.目前它仅在Chrome上受支持,但可以在其他浏览器上进行填充.请参阅[polyfill docs](https://github.com/filamentgroup/loadCSS#recommended-usage-pattern)中的推荐用法.你的代码看起来像这样:<head> <link rel ="preload"href ="/ non-critical.css"as ="style"onload ="this.rel ='stylesheet'"> <script> inlcude loadCSS polyfill here </ script> </ head> (3认同)
我发现当我使用穆罕默德所说的rel ="preload"技术时,样式表会更有效地下载.但是当我在开发工具性能选项卡中测试我的页面时,图表显示浏览器正在解析样式表两次.不一定是杀手,但可能会影响您的网页性能的意外行为. (2认同)

归档时间：	9 年前
查看次数：	6029 次
最近记录：	8 年，12 月前