20

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

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

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

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

4

9 に答える 9

28

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

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

ブラウザはクエスチョン マークの後のすべてを無視しますが、アップグレードすると新しい URL が生成され、キャッシュの再読み込みが行われます。

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

于 2008-09-10T15:49:34.250 に答える
9

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 ヘッダーを取得するコストだけです。それはあまりオーバーヘッドではありません..あなたがYahooでない限り。確かに、ほとんど変更されないイメージまたはスクリプトのセットがある場合は、クライアント キャッシュを確実に活用し、Cache-Control ヘッダーをオンにします。キャッシングはブラウザのパフォーマンスにとって重要です。すべての Web 開発者は、HTTP キャッシュがどのように機能するかを深く理解している必要があります。ただし、メリットがある特定のフォルダーまたはファイルに対しては、外科的で限定的な方法でのみ使用してください。それ以外の場合は、リスクがメリットを上回ります。コンテンツが変更されるたびにファイル名を変更したくない場合を除き、Web サイト全体の包括的なデフォルトとして有効にしたいものではないことは確かです。

于 2008-09-10T16:08:14.597 に答える
7

この問題をどのように克服したかについてのブログ投稿をここに書きました:

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

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

于 2009-07-30T20:00:10.353 に答える
7

@ジェイソンとダレン

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

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

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

編集:申し訳ありません。クエリ文字列でキャッシュしないのは、IE6 ではなく Squid です。詳細はこちら

于 2008-09-10T15:56:45.793 に答える
0

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

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

于 2008-11-22T09:47:51.383 に答える
0

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

于 2008-09-10T15:48:29.947 に答える
0

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

于 2008-09-10T15:51:28.317 に答える
0

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

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

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

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

于 2008-09-10T16:03:28.477 に答える
0

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

于 2008-09-10T16:08:55.763 に答える