Cache-Control を実際に試してみる(その2)

 2021/08/18, last updated 2022/08/03 -  ~3 Minutes

前: Cache-Control を実際に試してみる

スクリプトや、CSS、ドキュメントをサーバ上で更新しているが反映されないといったことがあるが、 Cache-Control と関係があるのだろうか。

ドキュメントからリンクされている script、css、画像などは暗黙にキャッシュされるルールがあるようだ。

cachetest のコード   に、cache_nospec2 を追加してみることとする。

cache_nospec2 が返すドキュメントには、以下のような css、javascript、画像へのリンクが貼ってある。

  1. content-type が text/javascript の script (キャッシュ指定なし)
  2. content-type が text/javascript の script (cache-control: max-age=60)
  3. content-type が text/plain の script (キャッシュ指定なし)
  4. content-type が text/css の css (キャッシュ指定なし)
  5. content-type が text/css の css (cache-control: max-age=60)
  6. content-type が text/plain の css (キャッシュ指定なし)
  7. content-type が image/jpeg の画像 (キャッシュ指定なし)
  8. content-type が image/jpeg の画像 (cache-control: max-age=60)

以下のようになるようだ。

ie11

cache_nospec2 をリンクから辿った場合

  1. キャッシュより
  2. キャッシュより
  3. キャッシュより
  4. キャッシュより
  5. キャッシュより
  6. キャッシュより
  7. キャッシュより
  8. キャッシュより

cache_nospec2 をアドレスバーから入力

  1. リクエスト送信
  2. キャッシュより
  3. リクエスト送信
  4. リクエスト送信
  5. キャッシュより
  6. リクエスト送信
  7. リクエスト送信
  8. キャッシュより

リロードした場合

  1. リクエスト送信
  2. リクエスト送信
  3. リクエスト送信
  4. リクエスト送信
  5. リクエスト送信
  6. リクエスト送信
  7. リクエスト送信
  8. リクエスト送信

chrome

cache_リンクから辿った場合

cache_nospec2 をリンクから辿った場合、アドレスバーから入力した場合、リロード(通常の再読み込み)した場合、全て同じ。

  1. リクエスト送信
  2. キャッシュより
  3. リクエスト送信
  4. リクエスト送信
  5. キャッシュより
  6. リクエスト送信
  7. リクエスト送信
  8. キャッシュより

ハード再読み込みした場合

  1. リクエスト送信
  2. リクエスト送信
  3. リクエスト送信
  4. リクエスト送信
  5. リクエスト送信
  6. リクエスト送信
  7. リクエスト送信
  8. リクエスト送信

まとめ

ie11

  • 参照元ドキュメントがリンクから辿られたか、アドレスバーから入力されたか、リロードされたかによってキャッシュの使われかたが違う。
  • キャッシュ指定していないのに、暗黙にキャッシュされる場合がある。

chrome

  • 参照元ドキュメントがリンクから辿られたか、アドレスバーから入力されたか、リロードされたかによらず、max-age などでキャッシュ設定された javascript、css、画像は、キャッシュが使われる。他の content-type については確認していないので不明。
  • ハードリロードは、再度読み直される。

ブラウザや操作方法によってキャッシュの使われ方が違ったり、途中にプロキシサーバ、キャッシュサーバなどがあることを想定するならば、 javascript / css / 画像に関しては、 Revving を適用したリソース   で解説されているように、 ファイル名にバージョンナンバーなどを入れるのが有効ではないだろうか。

  WEB開発