JSONリクエストに対してプリロードリンクが機能しないのはなぜですか？
私のWebサイトのJavaScriptは、いくつかのJSONをロードしてそれ自体を初期化します。
それらをプリロードしたいので、JavaScriptがAjaxリクエストを起動すると、それらは瞬時にロードされます。
そのための新しい link タグが存在します。
私はそれを使ってそのようなJSONをロードしようとしました：
<link rel="preload" href="/test.json">
ただし、Chromeはそれを2回ロードしてコンソールに警告を表示するようです：
リソースtest.jsonは、リンクのプリロードを使用してプリロードされましたが、ウィンドウのロードイベントから数秒以内に使用されませんでした。何もプリロードされていないことを確認してください。
したがって、JSONではプリロードが機能しないようです。実際、JSONへの参照は 仕様 で見つかりませんでした。
それは正しいですか、それとも間違っていますか？
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content によると、JSONファイルにはas="fetch"を追加する必要があります。だからあなたのコードは
<link rel="preload" href="/test.json" as="fetch">
最新のすべてのブラウザーでサポートされており、このリソースを数秒以内に使用しないと、このような場合（遅延、二重ロードなど）に「プリロード」すると逆効果になるため、警告メッセージが表示されます。
これは<link rel="prefetch" ...>とは異なります。これは、将来のナビゲーションを予測するためのものであり、広くサポートされていません。
A Chromeこれに関するイラスト付き記事： https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
私と同じ問題がある場合、おそらくVary: Acceptで応答が送信され、Accept: */*でプリロード要求が送信され、Accept: application/jsonでフェッチ/ xhr要求が送信されます。
プリロードAccept:の動作は変更できない（ため息）ので、Vary: Acceptを削除するか、一致するAccept:を使用してフェッチ/ xhrリクエストを行う必要がありますヘッダ。
As = "fetch"だけでなく、（ このコメントに基づく ）crossorigin = "anonymous"も追加する必要があります。これはうまくいくはずです：
<link rel="preload" href="/test.json" as="fetch" crossorigin="anonymous">
Chromeでfetch APIとrel=preloadここ 。代わりにXMLHttpRequestを使用してこれを解決しました。
Chrome 62では修正されているようですが、Chrome 63。
https://w3c.github.io/preload/#as-attribute で許可されている値にさまざまなバリエーションを試してみましたが、JSONデータを適切に取得するために機能したのはtypeを削除することだけでしたおよびasディレクティブは完全に、ブラウザがそれを理解することに依存しています。最新のChrome=で動作しますが、ブラウザーの動作の変化に応じて変化する可能性があります。
コメントに記載されているChrome bug によると、preloadは_responseType = 'blob'_があると機能しません。
回避策は、_responseType = 'arraybuffer'_を設定してから、onloadでvar blob = new Blob([xhr.response], {type: xhr.getResponseHeader("Content-Type")});を使用して手動でblobに変換することです
HTMLリンク要素
ブラウザ互換デスクトップ（2017年6月）
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
prefetch attribute 56 ? ? ? 43 ?