这是我的示例代码:
<body>
<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" />
<style>
@font-face {
font-family: "Roboto";
src: url("/fonts/Roboto-Regular.woff2") format("woff2");
}
* {
font-family: "Roboto", sans-serif;
}
</style>
<section>
<h2>Hello World</h2>
</section>
</body>
我的期望:
Roboto-Regular.woff2下载一次。第二次访问应该花费 <5ms，因为它是从缓存中读取的。我实际看到的:
Roboto-Regular.woff2被完全下载两次。第二次访问花费的时间与第一次一样多。
这里的蓝条是
Content Download .我尝试过的:
此处建议的解决方案:preloaded images get loaded again .但我很快意识到我的问题与缓存无关。我已经配置了服务器端缓存控制，如文件的响应头中所示:
之前的瀑布截图是硬刷新后(ctrl F5)；这是在软刷新后拍摄的:
这次两个请求都只是从缓存中得到了响应，这说明缓存与整个情况无关。
那么这里出了什么问题呢？
我的环境:
Windows 10 专业版 N 1909
谷歌浏览器 78.0.3904.108 x64
最佳答案
事实证明它与CORS有关。
今天，当我注意到控制台中有几个以前没有的新警告时，我无意中偶然发现了答案。
这些警告基本上完全按原样描述了我的问题。我做了一个快速的谷歌搜索并登陆这里:Preloading content with rel="preload" ，其中说:
One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS.
按照建议，我只是简单地输入了
crossorigin到我的预加载声明:<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" crossorigin />我的预载工作。
还
如果您要预加载 MIME 类型为
fetch 的资源如 .json ，您还需要包含 crossorigin出于类似原因(我假设)( Reference )，您的预加载声明中的属性。
关于HTML - 为什么我的预加载资源再次加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59353686/