実際のシナリオでは、実際にはもっと簡単です。JavaScript ファイル名に一意のチェックサムを追加し (ファイル自体は変更しません)、その完全な名前を HTML ファイルで使用します。また、ブラウザがこのファイルをリクエストするときは、ブラウザがこのファイルを「永久.js
に」キャッシュするように、将来のExpires
ヘッダー (通常は 1 年) を使用します。現在使用している Web サイトのソースを見てみましょう。
<script src="http://cdn.sstatic.net/js/stub.js?v=aa8b9e2e0673" type="text/javascript"></script>
<link href="http://cdn.sstatic.net/stackoverflow/all.css?v=ffb907d7e663" rel="stylesheet" type="text/css">
(SO は、@machineghostによってここで説明されている手法を使用します)。
ファイルを変更しない限り.js
、チェックサムとファイル名は同じで、ブラウザは何もしません。ファイルはキャッシュされており、1 年以内に変更されないと言われました。では、どのように変更しますか?ファイルを変更するたびに、チェックサムが変更されます。ブラウザは別の.js
ファイルを認識し、強制的にダウンロードします。前のファイルは役に立ちませんが、ブラウザはそれを 1 年間保持します (気にしません)。
このようにして、積極的なキャッシングと迅速な変更を組み合わせることができます (ブラウザーが古い JavaScript をキャッシュし、新しい HTML を使用するなどの問題はありません)。
script タグの src 属性、最初に js ファイルのキャッシュに移動
はい、この JavaScript ファイルが既にダウンロードされている場合、ブラウザはキャッシュを使用します。これは実際にはもう少し複雑です。前回ヘッダーを返した場合Expires
、ブラウザはサーバーにアクセスしません。ヘッダーのみを返したLast-Modifed
場合、ブラウザはいわゆる条件付き GETを発行します。サーバーは、ファイルが変更された場合などに新しいコンテンツのみを返します304 Not Modified
。