异步加载CSS的最简单方法
1年前
超过564天
温馨提示
本文最后更新于2023年05月11日，已超过564天没有更新，若内容或图片失效，请留言反馈。
以下文章来自机翻（原文链接在文章底部）：
为了提高页面性能和弹性，我们可以做的最有影响力的事情之一就是以不延迟页面渲染的方式加载CSS。这是因为默认情况下，浏览器将同步加载外部CSS-在下载和解析CSS时停止所有页面呈现-这两种方式都会导致潜在的延迟。当然，在允许页面开始呈现之前，至少应该加载站点的CSS的一部分，并且要立即将初始CSS获取到浏览器，我们建议内联（或HTTP 2服务器推送）CSS。对于总体CSS数量较少的站点，这可能就足够了，但是如果CSS很大（比如大于15到20 kb），按优先级划分可以提高性能。一旦拆分，不太重要的CSS应该异步加载到background-AKA。在这篇文章中，我的目标是描述我们这些天来首选的方法，实际上已经存在多年了。
有几种方法可以使CSS异步加载，但没有一种像您期望的那样直观。与script元素不同，没有async或defer属性可以简单地应用于link元素，所以多年来我们一直在维护loadCSS项目，以使加载异步CSS的过程变得更容易。不过最近，浏览器已经标准化了它们的CSS加载行为，所以像loadCSS这样的专用脚本来处理它们的微小差异可能不再必要。
密码
Permalink to '代码' #
现在，只要掌握一点浏览器如何处理各种link元素属性的知识，我们就可以用一小行HTML实现异步加载CSS的效果。下面是异步加载样式表的最简单方法：
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
打破这一点...
Permalink to '打破这一点...' #
这行HTML很简洁，但不是很直观，所以让我们分解一下这里发生了什么。
开始时，link的media属性设置为print。“Print”是一个媒体type，它说，“apply this stylesheet's rules for print-based media”，或者换句话说，在用户尝试打印页面时应用它们。诚然，我们希望我们的样式表应用于所有媒体（尤其是屏幕），而不仅仅是打印，但是通过声明一个与当前环境不匹配的媒体类型，我们可以实现一个有趣而有用的效果：浏览器将加载样式表而不延迟页面呈现，异步！这很有帮助，但这不是我们想要的全部。我们还希望CSS在加载后实际应用到屏幕环境中。为此，我们可以使用onload属性将link的媒体设置为all，当它完成加载时。
rel=preload也可以这样做吗？
Permalink to 'Can't rel=preload do this too？”
是的，同样！在过去的一两年里，我们一直在使用link[rel=preload]（而不是rel=stylesheet）来实现与上面类似的模式（分别在加载后切换rel属性而不是media属性）。使用这种方法仍然可以很好地工作，但是，在使用preload时需要考虑一些缺点。首先，浏览器对预加载的支持还不是很好，所以如果您想依靠polyfill（比如loadCSS提供的）来跨浏览器获取和应用样式表，那么它是必要的。更重要的是，preload会在最高优先级的时候很早就获取文件，这可能会降低其他重要下载的优先级，而这可能比你实际需要的非关键CSS的优先级更高。
幸运的是，如果你碰巧想要rel=preload提供的高优先级获取（在支持它的浏览器中），你可以将它与上面的模式结合起来，像这样：
<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
考虑到上面代码的简单和声明性质，我们会选择它而不是polyfill，所以打印媒体切换方法再次成为我们的首选。
为什么不使用假媒体属性？
为什么不使用一个假媒体属性？”
任何在过去几年中一直关注我们的文章的人可能会记得，我们使用了像“only x”这样的媒体属性值，通过提供一个不匹配任何环境的值来实现与“print”相同的效果，因为x是一个无意义的媒体类型。当浏览器遇到不匹配的媒体类型时，它们目前对它们都是一样的-它们仍然加载文件。也就是说，一些浏览器团队开始考虑区分不匹配的媒体类型和无效的（或浏览器根本无法识别的）媒体类型，并且可能不会请求使用无效媒体类型链接的文件。这会破坏很多现有的CSS加载实现，所以不太可能，但为了安全起见，我们建议使用有效的非匹配类型，如print。
您可能不需要loadCSS...
Permalink to '您可能不需要loadCSS...' #
我们继续维护loadCSS，并发现它在某些情况下很有用，特别是从JavaScript中以编程方式获取CSS文件，如下所示：loadCSS("/path/to/my.css").如果你已经在使用loadCSS或它的rel=preload polyfill模式，你不需要做任何改变。在内部，它使用本文中描述的相同机制。
然而，我们越来越多地发现，简单的HTML方法可能就是您所需要的全部。简单往往是最好的。
文章来源：https://www.filamentgroup.com/lab/load-css-simpler/
none
0 赞
or 打赏
喜欢就打赏一点
上一篇
