链接预获取能用于缓存JSON API响应以便稍后进行XHR请求吗？

Question

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

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

使用情况是这样的：我们的单页应用程序中的Javascript始终会使用XHR请求配置端点（AngularJS resolve），但是我们的脚本非常大且需要很长时间来解析，因此JSON配置将在解析完成后才被请求。预取将允许我们利用部分解析时间来获取并缓存API端点的响应，否则这些响应将必须等待脚本加载。

- bsa

Answer 1

是的，你应该能够预加载 JSON 在这里阅读。

fetch：可以通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer 或 JSON 文件。

因此，请尝试以下语法：

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

- Jens

---

它是否支持POST方法并定义链接属性，如果有一些参数？我在w3c中没有找到相关信息。 - sknight

@sknight href将发起GET请求。据我所知，只有FORM元素（或JS）可以发起POST请求。你可以像这样将参数添加到URL中：href="/api/config?param1=foo&param2=bar"。 - Jens

我在Chrome控制台中收到了以下消息：找到了“https://localhost/api/config”的预加载，但由于请求凭据模式不匹配，因此未使用。请考虑查看crossorigin属性。 我通过使用 crossorigin="anonymous" 解决了这个问题。 - Indiana Kernick

Answer 2

来自MDN：

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

我认为，在用户未来导航之前为用户预取数据，与在用户导航到图片之前预取图片相当相似。

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

- Okoch