ブラウザキャッシュ


ブラウザキャッシュとは、Webブラウザに組み込まれたキャッシュ機能です。

基本機能

アクセスしたコンテンツをメモリもしくはストレージ上に保存し、2回目以降のアクセスについては、保存されたものが使用されます。これにより、2回目以降のネットワークアクセスを抑制し、アクセスが高速化されます(同時に、ネットワーク使用量を減少させます)。

最新性の確認

ブラウザがキャッシュしたコンテンツについては、その最新性の確認が必要になります。この確認は、Webサーバによるコンテンツ有効期間の指示(cache-control等のHTTPヘッダ、もしくはHTMLのhttp-equiv属性)の有無により異なります。

有効期間の指示あり

ブラウザはその指示に従い、有効期間中は最新性の確認を行いません。

有効期間の指示なし

ブラウザはいくつかのタイミングで、コンテンツの最新性チェックを行います。以下のものが、一般的なブラウザで設定可能なオプションです:

  1. Webサイトを表示するたびに確認する
  2. Internet Explorerを開始するたびに確認する
  3. 自動的に確認する(デフォルト設定:IE等)
  4. 確認しない

ここで3の「自動的に確認する」についての一般的なブラウザの振る舞いは以下になります:

  1. コンテンツの(予想)有効期間を計算する
    • コンテンツの古さ(「コンテンツの取得時刻-コンテンツ最終更新時刻(Last-Modified)」)*係数(0.1程度/ブラウザにより異なる)
  2. (予想)有効期間の間、最新性チェックを行わない
    • 次に最新性チェックを行うのは「コンテンツの取得時刻+(予想)有効期間」以降

有効期間の指示なし、かつLast-Modifiedもなし

一般的に、コンテンツをキャッシュしません。

強制的な再読み込み

ブラウザによる自動的な確認およびリロードボタンによる最新性確認には、一般的にIMS(If Modified Since)リクエストが使用されます。一方、再読み込み(cache-controlによる強制的なコンテンツ再取得:スパーリロード、フルリロード、ハードリフレッシュ)を行うには、Controlキー+リロードボタン等の組み合わせが使用されます。

また、この組み合わせでは、後で述べるService Workerをバイパスさせる機能もあります。

SSLコンテンツ

最近のブラウザでは、SSLで取得したものであってもキャッシュが行われます。以下が最近のブラウザのオプション設定です:

  • ​IE:「Internetオプション→詳細設定→暗号化されたコンテンツを保存しない」
    • 昔はOn(SSLコンテンツをキャッシュしない)でしたが、最近のバージョンではOff(SSLコンテンツをキャッシュする)です
  • Firefox:”browser.cache.disk_cache_ssl”
    • SSLコンテンツをキャッシュするというのがデフォルトです。

注意点として、一般的なブラウザでは、SSLコンテンツのキャッシュを非暗号の状態でハードディスクに保存します。そのため、PC盗難等の際には、キャッシュされたSSLコンテンツが漏えいする可能性があります。センシティブな情報については、サーバ側でキャッシュさせない設定にすることが推奨されます。

一方、オブジェクトがキャッシュされているかの確認方法は、​chromeブラウザの場合、”​​​​chrome://cache​”を入力します。この操作により、キャッシュされているオブジェクトの一覧が表示されます。

その他補足

キャッシュ容量、ヒット率、レスポンス

ブラウザキャッシュの容量は、ユーザにより変更可能です。そして、ブラウザキャッシュの容量を大きくすればするほど、ヒット率が向上します。しかし、容量を2倍にしてもヒット率は2倍にはなりません。一方、ブラウザのキャッシュ実装は一般的に頑張っておらず、オブジェクト数が増え過ぎるとページ表示が遅くなるという逆転現象も見受けられます。

Service Worker

Service Workerは、ブラウザに対しProxy Cacheとして動作します。その実体は、Webページのバックグラウンドとして、ブラウザ上で動くJavascript環境で、以下のようなブラウザキャッシュには無い機能を持っています:

  • キャッシュへのオフラインアクセス
  • キャッシュオブジェクトの操作

キャッシュされたオブジェクトは、一般的なブラウザキャッシュとは独立に、サーバ単位で管理されます。また、最近の常としてhttpsが必須です。

また、いくつかのサイトで、すでに使用されています。Chromeの場合、以下のページで確認できます: