可以使用 link 预取缓存 JSON API 响应以供稍后的 XHR 请求使用吗?

Can link prefetch be used to cache a JSON API response for a later XHR request?

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

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

用例是这样的:在我们的单页应用程序中,将始终使用 XHR 从 Javascript 请求配置端点(AngularJS 解析,以防相关)。但是,我们的脚本很大,解析时间很长,所以解析完才会请求JSON配置。预取将允许我们使用一些解析时间来获取和缓存来自 API 端点的响应,否则这些端点将不得不等待脚本加载。

来自 MDN

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.

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

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

是的,您应该可以预加载 JSON Read here

fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.

所以试试这个语法:

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