我网站上的JavaScript加载了几个JSON来初始化自己。
我想预加载它们，当JavaScript将在其上启动Ajax请求时，它们将立即加载。
为此存在新的link标签。
我试着用它来加载像这样的JSON：
<link rel="preload" href="/test.json">
但是，Chrome似乎加载了两次并在控制台中显示警告：
资源test.json是使用链接预加载预加载的，但是在窗口加载事件的几秒钟内没有使用。请确保没有预装任何东西。
所以似乎preload对JSON不起作用。实际上，我没有在the specification中找到对JSON的引用。
这是正确的还是我做错了？
根据https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content，您必须为JSON文件添加as="prefetch"。所以你的代码变成了
<link rel="preload" href="/test.json" as="fetch">
所有现代浏览器都支持它，并且如果在几秒钟内没有使用该资源，则会收到警告消息，因为在这种情况下“延迟”，双重加载等“预加载”它会适得其反。
它与<link rel="prefetch" ...>不同，https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf是为了预测未来的导航而不是广泛支持。
关于这个的Chrome插图文章：fetch
事实证明Chrome中存在使用rel=preload API与here XMLHttpRequest结合使用的错误。我通过使用Vary: Accept来解决这个问题。
即使它似乎已经在Chrome 62中得到修复，但我仍然可以在Chrome 63上重现这一点。
如果你和我有同样的问题，你的回复可能是用Accept: */*发送的，预加载请求是用Accept: application/json发送的，而fetch / xhr请求是用Accept:发出的。
似乎预载Vary: Accept行为无法更改（叹气），因此您必须删除Accept:，或使用匹配的based on this comment标头进行fetch / xhr请求。
你不仅需要添加=“fetch”，而且（<link rel="preload" href="/test.json" as="fetch" crossorigin="anonymous">）也是crossorigin =“anonymous”。这应该工作：
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
prefetch attribute 56 ? ? ? 43 ?
试试as="object"。当我执行服务器推送时，似乎在Chrome中为我工作 - 这与HTML标记不完全相同，但如果您通过Ajax / XmlHttpRequest获取该资源，则可能会解决此问题。
试试<link rel="preload" href="/test.json" as="object">
。似乎为我工作：
qazxswpoi