预取资源被加载两次

Question

我想使用 html 预取来预取一个字体文件。我遵循了这里的建议：https://css-tricks.com/prefetching-preloading-prebrowsing/

<!doctype html>
<html>
<head>
<link rel="prefetch" href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2">
<style>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html, body {
font-family: 'Open Sans';
}
</style>
</head>
<body>
Hello world
</body>
</html>

但是，字体文件实际上在 Chrome 上加载了两次。我没有尝试过其他浏览器。

我做错了什么吗？

Answer 1

这是 prefetch 的错误用法。查看资源：https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

<link rel="prefetch"> is a directive that tells a browser to fetch a resource that will probably be needed for the next navigation.

...

<link rel="subresource"> was originally planned to tackle the current navigation, but it failed to do that in some spectacular ways.

...

The basic way you could use preload is to load late-discovered resources early. [...] Some of the resources are hidden in CSS and in JavaScript

所以，preload 就是我们要在这里使用的。但是，它几乎不被支持。

文中还有一些专门加载字体的话：

Something like:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

One point worth going over: You have to add a crossorigin attribute when fetching fonts, as they are fetched using anonymous mode CORS. Yes, even if your fonts are on the same origin as the page. Sorry.

将所有这些放在一起，更新后的可重现代码如下所示：

style.css:

/* 2MB of random character comment fluff */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html, body {
font-family: 'Open Sans';
}

index.html:

<!doctype html>
<html>
<head>
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2">
<link rel="stylesheet" href="style.css">
</head>
<body>
Hello world
</body>
</html>

现在，它可以工作，但只能在 Chrome Canary 中使用。我期待更好的浏览器支持即将到来。

Chrome:

金丝雀：

预取资源被加载两次

Prefetched resources are loaded twice

html

prefetch