为什么预加载链接不适用于 JSON 请求？

Question

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

我想预加载它们，这样当 JavaScript 将对其发起 Ajax 请求时，它们将立即加载。

为此存在一个新的 link 标签。

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

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

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

资源 test.json 是使用链接预加载预加载的，但在窗口加载事件后的几秒钟内未使用。请确保它不是无缘无故预加载的。

因此，preload 似乎不适用于 JSON。事实上，我没有在 规范 中找到对 JSON 的引用。

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

原文由 paulgreg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

它不同于 <link rel="prefetch" ...> 预期未来的导航并且不被广泛支持。

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

原文由 J.P. Duvet 发布，翻译遵循 CC BY-SA 4.0 许可协议