HTML

Question

这是我的示例代码：

  <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 被下载一次。第二次访问应该花费 <5 毫秒，因为它是从缓存中读取的。

我实际看到的：

Roboto-Regular.woff2 被完全下载了两次。第二次访问与第一次访问花费的时间相同。

这里的蓝色条是 Content Download。

我尝试过的：

此处建议的解决方案：。但我很快意识到我的问题与缓存无关。我已经配置了服务器端 cache-control，如在文件的响应 header 中所见：

之前的瀑布截图是硬刷新后截取的(ctrl F5);这张是软刷新后拍的：

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

那么这里出了什么问题？

我的环境：

Windows 10 Pro N 1909

Google Chrome 78.0.3904.108 x64

Answer 1

打开开发者工具时，chrome禁用缓存，这会导致重新加载资源。删除菜单栏中 disable cache 框上的复选标记主要解决问题。

Answer 2

原来跟CORS有关

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

这些警告基本上如实描述了我的问题。我进行了快速 Google 搜索并登陆此处：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).

Answer 3

致下一位到达这里的人：

如果您遇到同样的问题（双重下载您的资产）但您已经设置 crossorigin 属性。

<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" crossorigin />

您真的请求资产跨源吗？

尝试删除它！

<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" />

HTML - 为什么我预加载的资源又加载了？

HTML - Why is my preloaded resource loading again?

fonts

cross-domain

preload