html – 预加载的资源加载两次

发布时间：2020-12-14 16:36:41 所属栏目：资源来源：网络整理

导读：我想使用html预取来预取字体文件.我按照这里的建议： https://css-tricks.com/prefetching-preloading-prebrowsing/ !doctype htmlhtmlheadlink rel="prefetch" href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans92

我想使用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上加载了两次.我没有尝试过其他浏览器.

我做错了什么吗？

解决方法

这是预取的错误用法.查看资源： 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'),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.我指望即将推出更好的浏览器支持.

铬：

加纳利：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!