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

Question

我第一次尝试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中进行测试，我可以看到样式表按预期下载，但是它们实际上从未实际应用过，我在控制台上收到消息说预先加载的资源不是＆＃ 39;正在使用。

如果我移除rel=preload而仅支持rel=stylesheet，那么它的效果非常好。

我有什么遗失的吗？

Answer 1

你需要有2行，每行有rel = stylesheet，有一行有rel = preload。因为预加载只是取而不是应用。

然而，你可能不会注意到性能的提升，因为它会在另一条线之前碰到一条线。

更好的选择是内联在首屏上看到的css（see here），然后在页面加载（see here）上使用javascript添加到css文件中。

Answer 2

您如何看待这种方法：

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

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

Answer 3

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

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

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

Answer 4

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

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

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

---

对于谷歌字体链接，您可以以类似的方式看到这种方法：

<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