私はWeb標準を変更することなく、可能思われるもので最良の結果を得るための方法を見つけるために関連した問題を調査するために始めた、と私は、キャッシングについて疑問に思いました。ページのすべてのサブリソースの最終更新日を初期HTMLページと一緒に送ることができれば、ブラウザーは少なくとも1回はすべてのリソースをロードした後に変更されたヘッダーを尋ねることを避けることができます。これは実際には、最初のリクエストでのみすべてのリソースを送信するよりも優れています。これは、ブラウザがキャッシュを使用するほうが良いため（Barmarが指摘したように）、最初のロードでのみ有益であり、 。
Web拡張機能を使用しても、if-modified-sinceヘッダーを取得できないため、サーバーに接続する代わりにキャッシュされたバージョンを使用するようブラウザに指示することはできません。
この投稿はFacebookから、静的ファイルをハッシュして1年間の有効期限を与えてトラフィックを削減しようとしたところにあります。これは、URLがファイルの内容をガーベージすることを意味します。彼らはまだ多くの不必要な修正された要求を見て、FirefoxとChromeにリロードボタンの動作を変更してもはや静的リソースをリロードしないように納得させました。 Firefoxの場合は、新しいcache-control: immutableヘッダーが必要です。Chromeの場合はそうではありません。
これまでのようなものを見たことがありましたが、リソースの内容をハッシュしてデータベースから少なくとも10年間サービスするよりも便利なこの問題の解決策があることが判明しました。これはファイル名の新しいバージョン番号です。さらに便利な解決策は、バージョンクエリ文字列を追加することですが、それはturns out that that doesn't always workです。
確かに、これらのファイルを参照するファイルも変更する必要があるため、ファイル名を常に変更することは迷惑です。ただし、ファイルは実際には変更する必要はありません。サーバーを制御する場合、logo.vXXXX.pngがlogo.pngにリダイレクトされるようにリダイレクトルールを書くのと同じくらい簡単かもしれません（XXXXはエポックからの秒単位で最後に修正されたタイムスタンプです）[1]。今すぐあなたのテンプレートシステムは、ワードプレス 'wp_enqueue_scriptのようにタイムスタンプを自動的に生成させます。WordPressは、実際にはクエリ文字列技法で満足しています。これで、有効期限を遠からずに設定し、不変のキャッシュヘッダーを使用できるようになりました。ブラウザーがキャッシュコントロールを尊重している場合、etagsとif-modified-sinceヘッダーは完全に冗長になっているので安全に無視できるようになりました。
このソリューションは、ブラウザがキャッシュの検証を要求しないことを保証します。ただし、有効期限を事前に決定することなく、古いリソースは見られません。
クリーンなキャッシュで同じページのリソースをフェッチするために複数のリクエストを行う必要を回避する方法については、ここで元の質問には答えませんが、それ以降は（ブラウザのキャッシュがクリアされない限り）、 あなたは上手い！それが私のために十分だと思います。
[1]アプリケーションのバージョン番号を使用してページが参照するたびに、すべてのリソースのタイムスタンプをチェックするサーバーオーバーヘッドを回避することもできます。デバッグモードでは、開発のためにタイムスタンプを使用して、ファイルのすべての変更時にバージョンをバンプする必要がなくなります。
出典
2017-12-09 00:58:54
nus
この新しいモデルを使用するには、HTTPプロトコルを変更してブラウザを再設計する必要があります。 – Barmar
ブラウザは多くのコンポーネントをキャッシュするので、毎回ダウンロードする必要はありません。 – Barmar
@Barmar私は知っていますが、Webアプリケーションのバージョン全体をキャッシュすることもできます。データがajaxを介して取得される場合、アプリケーションは新しいバージョンのリリースごとに1回のみ変更されます。 – nus