我的网站上的JavaScript加载了几个JSON来初始化自身。
我希望预先加载它们，这样当JavaScript在其上启动Ajax请求时，它们将立即加载。
一个新的link标签就是为此而存在的。
我尝试使用它来加载类似以下JSON的内容：
<link rel="preload" href="/test.json">
然而，Chrome似乎会加载两次，并在控制台中发出警告：
资源test.json使用link preload进行预加载，但在窗口加载事件后的几秒钟内未被使用。请确保它不是无用的预加载。
这样看来，预加载对于JSON文件似乎不起作用。 实际上，在规范中，我没有找到JSON的参考信息。
这是正确的吗，还是我做错了什么？
as="fetch"。 因此，您的代码应该是：
<link rel="preload" href="/test.json" as="fetch">
所有现代浏览器都支持它，如果资源在几秒钟内未使用，则会收到警告消息，因为这样“预加载”它是适得其反（延迟，双重加载等）。<link rel="prefetch" ...>不同，后者是为了预测未来的导航，并且支持性不广泛。Vary: Accept 发送，预加载请求是使用 Accept: */* 发送的，并且 fetch/xhr 请求是使用 Accept: application/json 进行的。Accept: 行为无法更改（叹息），因此您要么需要删除 Vary: Accept，要么使用匹配的 Accept: 标头进行 fetch/xhr 请求。Vary: */*，但Chrome给出了与之前相同的警告：“资源...使用链接预加载进行了预加载，但未在窗口的加载事件后的几秒钟内使用。请确保它不是无谓地预加载。” - paulgreg您需要添加的不仅是 as="fetch"，还应该 (参考此评论) 添加 crossorigin="anonymous"。应该这样工作：
<link rel="preload" href="/test.json" as="fetch" crossorigin="anonymous">
fetch API与rel=preload组合时，Chrome存在一个错误（链接）。我通过使用XMLHttpRequest解决了这个问题。这是一种在Chrome和Safari中都有效的方法。
<link rel="preload" as="fetch" href="/data.json">
fetch('/data.json', {
method: 'GET',
credentials: 'include',
mode: 'no-cors',
})
这个答案包含更多细节和解释，说明为什么以及如何工作https://dev59.com/bFQK5IYBdhLWcg3wBrQK#63814972
我尝试了很多 https://w3c.github.io/preload/#as-attribute 允许的值，但是唯一能够正常获取JSON数据的方法是完全删除 type 和 as 指令，让浏览器自行判断。在最新版Chrome中有效，但随着浏览器行为的改变，可能会发生变化。
responseType = 'blob'时，preload不起作用。responseType = 'arraybuffer'，然后在onload中手动转换为blob，使用var blob = new Blob([xhr.response], {type: xhr.getResponseHeader("Content-Type")});
as="xhr"。当我进行服务器推送时，它在Chrome中似乎可以工作-虽然这与HTML标记不完全相同，但如果您通过Ajax / XmlHttpRequest获取资源，则可能会解决此问题。as 值。 - paulgregas="object"。对我来说似乎有效：<link rel="preload" href="/test.json" as="object">
<link rel="preload" href="test.json" as="json">，但出现了错误消息，抱怨“as”值不正确。是的，我知道“preload”目前只适用于Chrome，但我也在使用“prefetch”来解决其他浏览器的同样问题。 - paulgregas="script"。 - Asons