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

Question

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

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

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

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

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

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

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

看来preload对json不起作用。事实上，我没有在 the specification 中找到对 JSON 的引用。 .

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

Answer 1

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

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

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

它不同于<link rel="prefetch" ...>这是为了预测 future 的导航，并没有得到广泛支持。

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