链接预取可用于缓存JSON API响应，以供以后的XHR请求使用

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

本文关键字：请求 XHR 用于预取缓存 JSON 响应 API 链接更新时间：2023-09-26

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

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

用例是这样的：在我们的单页应用程序中，配置端点将始终使用XHR（AngularJS解析，如果相关的话）从Javascript请求。然而，我们的脚本非常大，解析需要很长时间，因此在解析完成之前不会请求JSON配置。预取允许我们使用部分解析时间从API端点获取和缓存响应，否则这些端点将不得不等待脚本加载。

是的，您应该能够在此处预加载JSON Read。

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

所以试试这个语法：

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

来自MDN:

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

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

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