可以使用链接预取来缓存 JSON API 响应以供以后的 XHR 请求使用吗？答案

【问题标题】：Can link prefetch be used to cache a JSON API response for a later XHR request?可以使用链接预取来缓存 JSON API 响应以供以后的 XHR 请求使用吗？
【发布时间】：2016-07-26 15:05:38
【问题描述】：

给定一个 JSON API 端点 /api/config，我们尝试在 HTML 文档的头部使用 <link rel="prefetch" href="/api/config">。当 Chrome 在 HTML 中点击链接标签时，它会按预期下载数据，但大约一秒钟后，它会通过我们的脚本中的 XHR 再次请求它。

服务器配置为允许缓存，并在标头中以Cache-Control: "max-age=3600, must-revalidate" 响应。当 Chrome 再次请求数据时，服务器会以 304 Not Modified 状态正确响应。

用例是这样的：在我们的单页应用程序中，配置端点将始终使用 XHR（AngularJS 解析，以防相关）请求。但是，我们的脚本非常大，需要很长时间来解析，所以在解析完成之前不会请求 JSON 配置。预取将允许我们使用一些解析时间来从 API 端点获取和缓存响应，否则这些响应必须等待脚本加载。

【问题讨论】：

标签： javascript html google-chrome browser-cache prefetch

【解决方案1】：

是的，您应该能够预加载 JSON Read here。

fetch：要被 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer 或 JSON 文件。

所以试试这个语法：

<link rel="preload" href="/api/config" as="fetch">

【讨论】：

它是否支持发布或者如果方法是带有一些参数的“发布”，如何定义链接的属性？我在w3c没有找到它
@sknight href 将发出 GET 请求。据我所知，只有 FORM 元素（或 JS）可以发出 POST 请求。您可以做的是将参数添加到 URL 中，如下所示：href="/api/config?param1=foo&param2=bar"。
我在 Chrome 的控制台中收到了这条消息。 A preload for 'https://localhost/api/config' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute. 我使用 crossorigin="anonymous" 解决了这个问题。

【解决方案2】：

来自MDN：

链接预取是一种浏览器机制，它利用浏览器空闲下载或预取用户可能访问的文档的时间不久的将来。

IMO，在用户未来导航需要数据之前为用户预取数据，这与在用户导航到图像之前预取图像非常相似。

另一种方法可以使用 web worker，在并行线程中获取数据。

【讨论】：