为什么preload链接不适用于JSON请求？

The JavaScript on my website loads several JSON to initialize itself.

我网站上的JavaScript加载了几个JSON来初始化自己。

I would like to preload them so, when the JavaScript will launch an Ajax request on it, they will be loaded instantaneously.

我想预先加载它们，当JavaScript将在其上启动Ajax请求时，它们将立即加载。

A new link tag exists for that.

存在新的链接标记。

I tried to use it to load a JSON like that :

我试着用它来加载像这样的JSON：

<link rel="preload" href="/test.json">

However, Chrome seems to load it twice and present a warning in the console :

但是，Chrome似乎加载了两次并在控制台中显示警告：

The resources test.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

资源test.json是使用链接预加载预加载的，但是在窗口加载事件的几秒钟内没有使用。请确保它没有预装。

So it seems that preload doesn’t work for JSON. Indeed, I haven’t found reference to JSON in the specification.

所以似乎preload对JSON不起作用。实际上，我没有在规范中找到对JSON的引用。

Is that correct or am I doing it wrong ?

这是正确的还是我做错了？

5 个解决方案

#1

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content , you have to add as="prefetch" for JSON files. So your code becomes

根据https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content，您必须为JSON文件添加as =“prefetch”。所以你的代码变成了

<link rel="preload" href="/test.json" as="fetch">

It's supported by all modern browsers and you get a warning message if this resource is not used within a few seconds because it is counterproductive to "preload" it in a such case (delay, double load etc.)

所有现代浏览器都支持它，如果在几秒钟内没有使用此资源，您会收到一条警告消息，因为在这种情况下“延迟”，加载等等会“预加载”它会适得其反。

It's different from <link rel="prefetch" ...> which is to anticipate future navigation and not supported widely.

它与不同，它预测未来的导航并且不被广泛支持。

A Chrome illustrated article about this: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

关于此的Chrome插图文章：https：//medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

#2

Turns out there has been a bug in Chrome for using the fetch API combined with rel=preload here. I solved this by using XMLHttpRequest instead.

事实证明Chrome中存在一个错误，即使用fetch API并结合rel = preload。我通过使用XMLHttpRequest来解决这个问题。

Even though it seems to have been fixed in Chrome 62 it seems like I could still reproduce this on my Chrome 63.

即使它似乎已经在Chrome 62中得到修复，但我仍然可以在Chrome 63上重现这一点。

#3

HTML link element

HTML链接元素

Browser compatibility Desktop (June 2017)

浏览器兼容性桌面（2017年6月）

Feature            Chrome   Edge    Firefox (Gecko) Internet Explorer   Opera   Safari
prefetch attribute  56        ?        ?                 ?               43      ?

https://developer.mozilla.org/en/docs/Web/HTML/Element/link

#4

Try as="xhr". Seems to be working for me in Chrome when I do a server push - that's not exactly the same as the HTML tag but if you are getting that resources via Ajax / XmlHttpRequest, this might fix it.

试试=“xhr”。当我进行服务器推送时，似乎在Chrome中为我工作 - 这与HTML标签不完全相同，但如果您通过Ajax / XmlHttpRequest获取该资源，则可能会解决此问题。

#5

If you have the same problem as me, your response is probably being sent with Vary: Accept, the preload request is sent with Accept: */*, and the fetch/xhr request is being made with Accept: application/json.

如果您遇到与我相同的问题，您的响应可能与Vary一起发送：接受，预加载请求与Accept：* / *一起发送，并且fetch / xhr请求是使用Accept：application / json发出的。

It seems like the preload Accept: behavior can't be changed (sigh), so you'll have to either remove the Vary: Accept, or make the fetch/xhr request with a matching Accept: header.

似乎预加载Accept：行为无法更改（叹气），因此您必须删除Vary：Accept，或者使用匹配的Accept：标头生成fetch / xhr请求。

#1