rel=样式表的预加载在下载后不应用样式
rel=preload for stylesheet isn't applying the styles once downloaded
我第一次尝试 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，那么它就可以正常工作了。
有什么我遗漏的吗？
您需要有 2 行，每一行带有 rel=stylesheet，另一行带有 rel=preload。因为预加载只是获取它而不是应用。
但是，您可能不会注意到性能有多大提升，因为它先到达一行，然后再到达另一行。
更好的选择是内联 css (see here) that is seen above the fold then use javascript to add in the in the css file on page load (see here)。
您如何看待这种做法：
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
从技术上讲，您可以指定 multiple values for rel attribute。像这样的东西应该可以完成工作，而不需要每个样式表写 2 行：
<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">
您可以使用 Lighthouse 验证这一点。这是在我的浏览器上的结果（没有链式请求，因为样式表已预加载并已正确应用）：
接受的答案是正确的，但不是很清楚。对于一个文件，您需要 2 行，而不是一行：
<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
我第一次尝试 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，那么它就可以正常工作了。
有什么我遗漏的吗？
您需要有 2 行，每一行带有 rel=stylesheet，另一行带有 rel=preload。因为预加载只是获取它而不是应用。
但是，您可能不会注意到性能有多大提升，因为它先到达一行，然后再到达另一行。
更好的选择是内联 css (see here) that is seen above the fold then use javascript to add in the in the css file on page load (see here)。
您如何看待这种做法：
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
从技术上讲，您可以指定 multiple values for rel attribute。像这样的东西应该可以完成工作，而不需要每个样式表写 2 行：
<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">
您可以使用 Lighthouse 验证这一点。这是在我的浏览器上的结果（没有链式请求，因为样式表已预加载并已正确应用）：
接受的答案是正确的，但不是很清楚。对于一个文件，您需要 2 行，而不是一行：
<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