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

1> eirenaios..：

---

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

- Google Developers

默认情况下,CSS被视为渲染阻止资源.

媒体类型和媒体查询允许我们将一些CSS资源标记为非渲染阻止.

浏览器会下载所有CSS资源,无论阻塞或非阻塞行为如何.

CSS是一种渲染阻止资源.尽快并尽快将其发送给客户,以优化首次渲染的时间.

但是,如果我们有一些仅在某些条件下使用的CSS样式,例如,在打印页面或将其投影到大型显示器上时会怎么样？如果我们不必阻止对这些资源的渲染,那将是很好的.

CSS"媒体类型"和"媒体查询"允许我们解决这些用例:

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

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

第一个声明是渲染阻塞和所有条件下的匹配.

第二个声明也是渲染阻塞:"all"是默认类型,所以如果你没有指定任何类型,它会隐式设置为"all".因此,第一和第二声明实际上是等同的.

第三个声明具有动态媒体查询,在加载页面时对其进行评估.根据加载页面时设备的方向,portrait.css可能会也可能不会呈现阻止.

最后一个声明仅在打印页面时应用,因此当首次在浏览器中加载页面时,它不会呈现阻止.

来源 - 渲染阻止CSS -

---

有一个名为Preload(aka rel = preload)的新浏览器功能,它允许我们开始获取CSS但阻止它阻塞.目前它仅在Chrome上受支持,但可以在其他浏览器上进行填充.请参阅[polyfill docs](https://github.com/filamentgroup/loadCSS#recommended-usage-pattern)中的推荐用法.你的代码看起来像这样: