样式表的 rel=preload 下载后不应用样式答案

【问题标题】：rel=preload for stylesheet isn't applying the styles once downloaded样式表的 rel=preload 下载后不应用样式
【发布时间】：2018-03-29 00:20:05
【问题描述】：

我第一次尝试rel=preload，将它用于几个样式表。这是有问题的代码：

<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">

我正在 Chrome 61 中进行测试，我可以看到样式表已按预期下载，但它们从未实际应用，并且我在控制台上收到消息说未使用预加载的资源。

如果我删除 rel=preload 只支持 rel=stylesheet，那么它工作得非常好。

我有什么遗漏吗？

【问题讨论】：

您是否也为每个人添加了<link rel="stylesheet">？预加载在这样的样式表上并不是很有用，因为它们已经在 <head> 中了。
哦，对了，我在网上的例子中不知何故错过了这一点。谢谢

标签： css google-chrome preload

【解决方案1】：

接受的答案是正确的，但不是很清楚。对于一个文件，您需要 2 行，而不是 1：

<link rel="preload" href="css/styles.css" as="style"> 
<link rel="stylesheet href="css/styles.css">

我使用这种方法主要是因为 css 背景图片。显然这会加快加载速度。

您可以以类似的方式看到这种方法用于 google 字体链接：

<link rel='preconnect' href='https://fonts.googleapis.com'> 

<link href='https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300&family=Source+Sans+Pro:wght@300;400;600&display=swap' rel='stylesheet'>

它对字体也很有用。 See Mozilla Docs

【讨论】：

【解决方案2】：

从技术上讲，您可以指定multiple values for rel attribute。像这样的东西应该可以完成这项工作，而无需为每个样式表编写 2 行代码：

<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">

您可以使用 Lighthouse 进行验证。这是我的浏览器上的结果（没有链接请求，因为样式表已预加载，并且已正确应用）：

【讨论】：

非常好的解决方案，非常感谢分享！比内联应用 JS 更喜欢它:)
在我关心的浏览器中工作。谢谢！
样式表是否需要crossorigin？
非常感谢..让我试试..

【解决方案3】：

您如何看待这种方法：

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

资源：https://www.filamentgroup.com/lab/async-css.html

【讨论】：

尽管它具有内联 js 的性质，但我发现它最符合 DRY，因此我认为它比公认的答案更优雅。干杯！
太棒了。非常感谢你做的这些。很漂亮。
我看到的唯一问题是它在加载时会跳跃一点。可能是我需要内联我的标题样式
这在 Firefox 中不起作用，就像@John 说的那样，你需要 rel="preload" 和 rel="stylesheet"
也不能在 IE11 或 pre-chrome Edge 中工作，以防你需要支持那些caniuse.com/link-rel-preload

【解决方案4】：

您需要为每一行设置 2 行 rel=stylesheet 和 1 行 rel=preload。由于预加载只是获取它而不是应用。

但是，您可能不会注意到性能提升很多，因为它在一行之前就到达了另一行。

更好的选择是内联显示在首屏上方的 css (see here)，然后在页面加载 (see here) 时使用 javascript 添加到 css 文件中。

【讨论】：

这里的答案与我在评论中回复 Ryan 的答案相同。我只有一个小应用程序，所以尝试使用预加载可能没有多大意义。感谢您的深入回答
我同意一切都取决于应用程序，我已经看到在大型应用程序上执行此操作可节省大量成本，但要使其易于管理需要做很多工作。