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

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

有什么我想念的吗？

原文由 Denno 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

但是，您可能不会注意到性能有很大的提高，因为它在一条线之前就到达了另一条线。

更好的选择是内联在折叠上方看到的 css（ 参见此处），然后使用 javascript 在页面加载时添加到 css 文件中（ 参见此处）。

原文由 John 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您如何看待这种方法：

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

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

原文由 M. Paulikas 发布，翻译遵循 CC BY-SA 3.0 许可协议