プリフェッチをリンクして、後のXHRリクエストのJSON APIレスポンスをキャッシュできますか？

Question

JSON APIエンドポイント/api/configがあると、HTMLドキュメントの先頭に<link rel="prefetch" href="/api/config">を使用しようとしています。 ChromeはHTMLのリンクタグに当たったときにデータを期待どおりにダウンロードしますが、約1秒後にXHRを介してスクリプトから再度リクエストします。

サーバーはキャッシュを許可するように構成されており、ヘッダーにはCache-Control: "max-age=3600, must-revalidate"と応答しています。 Chromeがデータを再度要求すると、サーバーは304 Not Modifiedステータスで正しく応答します。

ユースケースはこれです。設定エンドポイントは、XHR（AngularJSの解決、該当する場合）を使用して、単一ページアプリケーションのJavascriptから常に要求されます。しかし、私たちのスクリプトは非常に大きく、解析に時間がかかるので、JSON設定は解析が終了するまで要求されません。プリフェッチを使用すると、その解析時間の一部を使用して、スクリプトが読み込まれるまで待たなければならないAPIエンドポイントからの応答を取得してキャッシュすることができます。 MDNから

Answer 1

：

リンクプリフェッチは、ユーザが 近い将来訪れるかもしれないドキュメントをダウンロードするか、プリフェッチするためにブラウザのアイドル 時間を利用して、ブラウザのメカニズム、です。

IMOは、将来のナビゲーションで必要となる前に、ユーザーのデータを先読みしてから、先にナビゲートする前のイメージをプリフェッチするのと非常に似ています。

ウェブworkerを使用して、パラレルスレッドでデータをフェッチする別の方法があります。

Answer 2

はい、JSON Read hereをプリロードできるはずです。

fetch：フェッチまたはXHR要求（ArrayBufferまたはJSONファイルなど）によってアクセスされるリソース。

だから、この構文を試してみてください。

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