我第一次尝试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
,那么它的效果非常好。
我有什么遗失的吗?
答案 0 :(得分:7)
你需要有2行,每行有rel = stylesheet,有一行有rel = preload。因为预加载只是取而不是应用。
然而,你可能不会注意到性能的提升,因为它会在另一条线之前碰到一条线。
更好的选择是内联在首屏上看到的css(see here),然后在页面加载(see here)上使用javascript添加到css文件中。
答案 1 :(得分:5)
您如何看待这种方法:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
答案 2 :(得分:3)
从技术上讲,您可以指定 multiple values for rel
attribute。这样的事情应该可以完成工作,而无需为每个样式表编写 2 行:
<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">
您可以使用 Lighthouse 验证这一点。这是在我的浏览器上的结果(没有链接请求,因为样式表已预加载并已正确应用):
答案 3 :(得分:0)
接受的答案是正确的,但不是很清楚。对于一个文件,您需要 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