css - 如何将 rel="preload" 和 rel="stylesheet" 用于同一个标签？

Question

与样式表一起使用时，Google Pagespeed 测试无法识别预加载。我试过了

<link rel="preload stylesheet" href="http://www.example.com/style.css" />

并且它仍然显示“考虑使用优先获取页面加载中稍后请求的资源。”。如果我从 rel 属性中删除样式表，它会识别预加载。

我想试试这个：

<link rel="preload" rel="stylesheet" href="http://www.example.com/style.css" />

但我不确定同一个链接标签是否可以有 2 个相同的属性。这行得通吗？

标签： csspreloadgoogle-pagespeed

Answer 1

对于异步加载 CSS 样式，您应该将其指定为预加载样式表。每当您rel="preload"单独使用时，它不会在页面加载时转换为样式表，它将保持为preload，因此要将其指示为样式表，您应该使用另一个属性，例如as指示元素的类型，在您的情况下，它应该是style. 然后您需要在加载过程完成时告诉浏览器您需要将其视为样式表，因此您必须定义另一个属性onload，然后定义它的真实关系。

所以你必须像这样导入它：

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">

注意：您可以在 Google 开发人员中阅读更多相关信息。

更新

由于直到现在preloadFirefox 不支持（根据thisrel ），唯一的方法是在一个标签或两个单独的标签中声明它两次。

<link rel="preload" as="style" href="http://www.example.com/style.css">
<link rel="stylesheet" href="http://www.example.com/style.css">

或者

<link rel="stylesheet" rel="preload" as="style" href="http://www.example.com/style.css">

注意：由于@JohnyFree 在 Google 页面速度中测试了第二个（通过一行），它不会被识别为有效preload样式，而根据W3.org格式是有效的。