1. ウェブブラウザの「リロード」は普通のアクセスとは違う!
「ウェブブラウザのリロード」 というのは、ウェブブラウザで表示しているウェブページにもう一度アクセスする操作のことを指します。 再読込み とも呼ばれ、通常 F5 や Ctrl + R というキーボードショートカットキーを使って実行することもできます。
一般的なウェブブラウザにおいて、この「リロード」処理は 通常のアクセスとは違った動きになっています。何が違うのかというと、「キャッシュがあっても使わない」 のです。ブラウザ内部に目的のウェブページのキャッシュが残っていて、キャッシュを使う条件が揃っていたとしても、もう一度取得するためのアクセスを行います。
その理由は、以下のようです。
- リロードするということは、何らかの理由によりウェブページが正常に読み込まれなかった可能性があるため、もう一度元のウェブページにアクセスし直した方が良い。
- そのウェブページは内容が更新されているはずなので、その時表示されているのは古いまま(キャッシュが使用されている)であったから、リロードしようとした可能性がある。なので、もう一度元のウェブページにアクセスして最新の内容を取得した方が良い。
但し、少し違うのは Last-Modified
や ETag
といった 検証子 (Validators) がセットされたリソース(画像ファイルなど)の場合です。この場合は、条件付きリクエストが送信されます。普通のリクエストではありません。ですので、304 Not Modified
が Webサーバーから返ってきたらキャッシュを使います。
さらに Chrome は 少し動作が違います。あるウェブページにアクセスした時に、そのページ内に 検証子 (Validators) がセットされた画像ファイルが含まれていたとします。このとき、Firefox のリロードだとその画像ファイルに対して条件付きリクエストを送りますが、Chrome のリロードではキャッシュが使用されます。これは、2017年1月に Chrome の動作に変更が入ってこうなったようです。これにより無駄な条件付きリクエストが発生しません。
(参考: Chromium Blog: Reload, reloaded: faster and leaner page reloads)
2. もう一つのリロード
Chrome のキーボード ショートカット や Firefox のキーボードショートカット を見ると、通常のリロード(再読み込み)とは別に、
Chrome の場合は、
Firefox の場合は、
という項目があるのが分かります。
これは、Last-Modified
や ETag
といった 検証子 (Validators) がセットされたリソース(HTMLファイルや画像ファイルなど)であっても、条件付きリクエストは送らず、通常のリクエストを送ります(実際は少し違います。詳しくは「おまけ」をご覧ください)。アクセスするウェブページに含まれた画像ファイルなどに対しても同様です。はじめてそのウェブページにアクセスしたかのような動作になります。
3. 表にまとめてみました
ちょっと分かりづらいかもしれませんが、表にまとめてみました。
「通常のアクセス」というのは、例えばリンクをクリックしてアクセスした場合を意味しています。
4. おまけ
Chrome と Firefox で リロードの動作を確認したところ、目的のウェブページにただアクセスしているだけでなく、普段はセットしていない HTTPリクエストヘッダフィールドをセットしているようでした。普通のリロードと、もう一つのリロードのいずれも同じでした。
※ これらのフィールドが違う目的でセットされているのでしたら、教えて頂けるとありがたいです。
Chrome
Pragma: no-cache
Cache-Control: no-cache
Firefox
Cache-Control: max-age=0
どちらも、「最新の内容のページが欲しい」 という意図を持っていますが、この意図を Webサーバーに伝えるというよりは、プロキシサーバー(あった場合)に伝えることが重要なのではないかと思います。
5. おまけ2: Chrome でのリロード操作
Chrome の場合、デベロッパーツールを表示した状態でリロードボタンを右クリックすると、3種類のリロード操作を選ぶことができます。
リロード(再読み込み)の種類 | 説明 |
---|---|
通常の再読み込み | 文字通り、通常のリロードです。 |
ハード再読み込み | 「キャッシュ コンテンツを無視して現在のページを再読み込みする」を指しています。 |
キャッシュの消去とハード再読み込み | キャッシュを消去してから、ハード再読み込みを行うようです。 |