gpt4 book ai didi

HTML - 为什么我的预加载资源再次加载?

转载 作者:行者123 更新时间:2023-12-03 16:22:30 24 4
gpt4 key购买 nike

这是我的示例代码:

  <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被完全下载两次。第二次访问花费的时间与第一次一样多。

Hard Refresh Waterfall

这里的蓝条是 Content Download .

我尝试过的:

此处建议的解决方案: preloaded images get loaded again .但我很快意识到我的问题与缓存无关。我已经配置了服务器端缓存控制,如文件的响应头中所示:

Response Header

之前的瀑布截图是硬刷新后(ctrl F5);这是在软刷新后拍摄的:

Soft Refresh Waterfall

这次两个请求都只是从缓存中得到了响应,这说明缓存与整个情况无关。

那么这里出了什么问题呢?

我的环境:

Windows 10 专业版 N 1909

谷歌浏览器 78.0.3904.108 x64

最佳答案

事实证明它与CORS有关。

今天,当我注意到控制台中有几个以前没有的新警告时,我无意中偶然发现了答案。

New warnings

这些警告基本上完全按原样描述了我的问题。我做了一个快速的谷歌搜索并登陆这里: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 />
我的预载工作。

Preload Working



如果您要预加载 MIME 类型为 fetch 的资源如 .json ,您还需要包含 crossorigin出于类似原因(我假设)( Reference ),您的预加载声明中的属性。

fetch requires crossorigin too

关于HTML - 为什么我的预加载资源再次加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59353686/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com