可以使用链接预取来为稍后的XHR请求缓存JSON API响应吗?

时间:2016-07-26 15:05:39

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

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

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

用例是这样的:将始终使用XHR(AngularJS解析,如果相关)从我们的单页面应用程序中的Javascript请求配置端点。但是,我们的脚本非常大并且需要很长时间才能解析,因此在解析完成之前不会请求JSON配置。预取将允许我们使用一些解析时间来从API端点获取和缓存响应,否则必须等待脚本加载。

2 个答案:

答案 0 :(得分:4)

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

  

fetch:fetch或XHR请求访问的资源,例如ArrayBuffer或JSON文件。

请尝试使用以下语法:

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

答案 1 :(得分:0)

来自MDN

  

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

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

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