Help us understand the problem. What is going on with this article?

キャッシュについて整理

More than 1 year has passed since last update.

キャッシュとは

使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。
- IT用語辞典

Webサイトの表示においては、一度アクセスしたページのデータを特定の場所に保存することで、次回アクセス時の表示を速くし、サーバへの無駄なリクエストを減らせるというメリットがあります。また一口にキャッシュといっても下記の2種類があるので、どちらを指しているのか(あるいは両方か)意識しておきましょう。

  • ブラウザのキャッシュ:そのパソコンのユーザーが見たページのデータがローカルに溜まっていく。
  • キャッシュサーバのキャッシュ:不特定多数のユーザーが見たページのデータがネットワーク上に溜まっていく。

キャッシュの制御方法

✏️ HTTPレスポンスヘッダ で制御

➡️ Cache-Control ヘッダ

ブラウザやキャッシュサーバに対して、キャッシュの動作や有効期限を指定するためのものです。

ディレクティブ(コマンド) 説明
must-revalidate キャッシュが期限切れだった場合、オリジンサーバでの確認無しにキャッシュを利用してはならない
no-cache オリジンサーバでの確認無しにキャッシュを利用してはならない
no-store リクエスト、レスポンスの一切を保存してはならない
no-transform 中継者は形式変換してはならない(画像の再圧縮等を防ぐ)
public 複数ユーザーで共有できるようにキャッシュしてよい(主にキャッシュサーバ)
private 特定ユーザーだけが使えるようにキャッシュしてよい(主にブラウザ)
proxy-revalidate privateキャッシュには適用されないことを除き、must-revalidateと同じ
max-age キャッシュの有効期限を設定する(秒数)
s-maxage 共有キャッシュにおいて、max-ageディレクティブまたはExpiresヘッダで指定された値を上書きする

➡️ Expires ヘッダ

Expires "Mon, 26 Jul 1997 05:00:00 GMT"

キャッシュの有効期限を指定します。Cache-Control: max-age と同じですが、 Google Developers によると、

より広くサポートされているため、Cache-Control: max-age よりも Expires をおすすめします

とのこと。

➡️ ETag ヘッダ

同じファイルかどうか比較するための検証子です。一意に識別する値(バージョンやコンテンツハッシュ)を設定。ブラウザからのIf-None-Match リクエストヘッダと比較判断します。

➡️ Last-Modified ヘッダ

同じファイルかどうか比較するための検証子です。最後に改変された日付時刻を設定。ブラウザからのIf-Modified-Since リクエストヘッダと比較判断します。

ETagとLast-Modifiedは両方指定すると冗長になるので、どちらかだけでOK。

➡️ Vary ヘッダ

指定したヘッダ(言語、ユーザーエージェント等)毎に応答表現が変わることを伝えます。
これにより、例えば同一URLでPC向け・スマホ向けページを出し分けている場合、それぞれでキャッシュを持つことが出来ます。

✏️ HTMLの<meta>タグで制御

HTML4.xでは<meta>タグでブラウザキャッシュの制御が可能です。(ただしキャッシュサーバのキャッシュを使用してしまう可能性は残ります。)

  • キャッシュさせない
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
  • キャッシュの有効期限を設定
<meta http-equiv="Expires" content="Tue, 16 Feb 2016 14:25:27 GMT">

HTML5ではhttp-equiv属性に対してキャッシュに関するキーワードを設定することは出来ません。

Pragma directives corresponding to headers that affect the HTTP processing model (e.g. caching) must not be registered
- 4.2.5.4 Other pragma directives

なおWebアプリをオフラインで使う目的で策定が進められていたApplication cache APIは廃止予定 とのことです。

参考サイト

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away