積極的な JavaScript キャッシュのサポート

https://stackoverflow.com/questions/54475

09-06-2019
|

質問

HTML ファイル内で参照されているいくつかの JavaScript ファイルに変更を加えても、ブラウザーでその変更が認識されないという問題が発生しました。Web サーバーのバージョンが新しい場合でも、ブラウザーにキャッシュされたコピーが保持されます。

ブラウザーにキャッシュを強制的にクリアするまで、変更は確認されません。

これは Web サーバーの構成ですか?JavaScript ファイルをキャッシュしないように設定する必要がありますか?でいくつかの興味深いテクニックを見てきました。 Google ウェブツールキット実際に作成する場所 新しい 更新が行われるときの JavaScript ファイル名。これは、プロキシやブラウザが古いバージョンの JavaScript ファイルを同じ名前で保持するのを防ぐためだと思います。

どこかにベストプラクティスのリストはありますか?

解決

次のように、すべての Javascript (および CSS など) の末尾に製品のビルド番号を追加します。

<script src="MyScript.js?4.0.8243">

ブラウザは疑問符以降をすべて無視しますが、アップグレードすると新しい URL が作成され、これはキャッシュの再読み込みを意味します。

これには、「決してキャッシュしない」ことを意味する HTTP ヘッダーを設定できるという追加の利点もあります。

他のヒント

Web サーバーのバージョンが新しい場合でも、ブラウザーにキャッシュされたコピーが保持されます。

これはおそらく、HTTP Expires / Cache-Control ヘッダーが設定されているためです。

http://developer.yahoo.com/performance/rules.html#expires

これについてはここに書きました：

http://www.codinghorror.com/blog/archives/000932.html

これ自体は悪いアドバイスではありませんが、間違えると大きな問題を引き起こす可能性があります。たとえば、Microsoft の IIS では、おそらくまさにその理由から、Expires ヘッダーはデフォルトで常にオフになっています。HTTP リソースに Expires ヘッダーを設定すると、クライアントに次のように指示します。 そのリソースの新しいバージョンを決してチェックしないでください -- 少なくとも Expires ヘッダーの有効期限までは。私が「絶対にしない」と言っているのは、本気で言っているのです。ブラウザは、聞く新しいバージョンの場合。クライアントがキャッシュをクリアするか、キャッシュが有効期限に達するまでは、キャッシュされたバージョンが有効であると想定されます。 Yahoo では、これらのリソースを更新する必要がある場合、そのファイル名を変更すると述べています。

ここで実際に節約できるのは、クライアントがサーバーに新しいバージョンを ping して、リソースが変更されていない一般的なケースで 304 not Modified ヘッダーを取得するコストだけです。それはそれほどオーバーヘッドではありません..あなたがヤフーでない限り。確かに、ほとんど変更されない画像やスクリプトのセットがある場合は、クライアントキャッシュを確実に活用し、Cache-Control ヘッダーをオンにしてください。キャッシュはブラウザのパフォーマンスにとって重要です。すべての Web 開発者は、HTTP キャッシュがどのように機能するかを深く理解する必要があります。ただし、利益が得られる特定のフォルダーまたはファイルに対して、外科的で限定された方法でのみ使用してください。それ以外の場合は、リスクが利益を上回ります。これは、Web サイト全体の包括的なデフォルトとして有効にしたいものではありません。コンテンツが変更されるたびにファイル名を変更するのが好きでない限り。

@ジェイソンとダレン

~~IE6~~ クエリ文字列を持つものはすべてキャッシュ不可能として扱います。偽のディレクトリなど、URL にバージョン番号を取得する別の方法を見つける必要があります。

<script src="/js/version/MyScript.js"/>

リクエストを実行する前に、サーバー側で js の後の最初のディレクトリレベルを削除するだけです。

編集：皆さんごめんなさい。クエリ文字列でキャッシュされないのは、IE6 ではなく Squid です。より詳しい情報ここ.

この問題をどのように克服したかについてのブログ記事をここに書きました。

ASP.NET での JavaScript および CSS スタイルシートのキャッシュ問題の回避

基本的に、開発中に、CSS ファイルのファイル名の後のクエリ文字列に乱数を追加できます。リリースビルドを実行すると、コードは代わりにアセンブリのリビジョン番号を使用するように切り替わります。つまり、運用環境では、クライアントはスタイルシートをキャッシュできますが、サイトの新しいバージョンをリリースするたびに、ファイルの再読み込みが強制されます。

私も名前を変更するだけの方法です。決して失敗することはなく、かなり簡単に実行できます。

ウェブサーバーはブラウザに新しいバージョンがあることを伝えるために正しいヘッダーを送信していますか?以前にクエリ文字列に日付も追加しました。例: myscripts.js?date=4/14/2008 12:45:03 (日付のみがエンコードされます)

@Darrenキャッシュの問題は、そのままの状態でIIS 6とApache 2の両方で発生しました。適切な解決策が HTTP 応答ヘッダーを変更することではなく、ここでのいくつかの応答で説明されている名前変更ルートを取ることであるかどうかはわかりません。

@Chris良いヒントです。クエリ文字列のアプローチは良い方法だと思いましたが、すべてのケースに対応するには一意のファイル名またはディレクトリ名が必要なようです。

リリースごとに、単調増加する整数をすべての静的アセットのルートパスの前に追加するだけです。これにより、クライアントは強制的にリロードされます (IE6 でクエリ文字列メソッドが壊れるのを以前に確認しました)。例えば：

リリース 1:http://www.foo.com/1/js/foo.js
リリース 2:http://www.foo.com/2/js/foo.js

リリースごとにリンクを再調整する必要がありますが、リンクを展開ツールに自動的に変更する機能を構築しました。

これを実行すると、リリースごとにパスが変更されるため、クライアントが JS リソースを「永久に」キャッシュできるようにする Expires/Cache-Control ヘッダーを使用できます。これが @JasonCohen が目指していたことだと思います。

いくつかの非常に役立つテクニックここ PowerShell を使用して展開を自動化する予定がない場合でも。

それがどれほどの価値があるのか、私は見ました逸脱アートこのサイトはかなり大きなサイトで、JS ファイルを 54504.js として提供しています。確認したところ、v6core.css?-5855446573 v6core_jc.js?4150339741 などとして提供されるようになりました。

クエリ文字列の問題がサーバーに起因する場合は、多かれ少なかれ制御できると思います。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow