Web

ウェブブラウザのリロード処理

投稿日:2017年6月29日 更新日:

1. ウェブブラウザの「リロード」は普通のアクセスとは違う!

「ウェブブラウザのリロード」 というのは、ウェブブラウザで表示しているウェブページにもう一度アクセスする操作のことを指します。 再読込み とも呼ばれ、通常 F5Ctrl + R というキーボードショートカットキーを使って実行することもできます。

Chrome で右クリックして表示されるメニュー

一般的なウェブブラウザにおいて、この「リロード」処理は 通常のアクセスとは違った動きになっています。何が違うのかというと、「キャッシュがあっても使わない」 のです。ブラウザ内部に目的のウェブページのキャッシュが残っていて、キャッシュを使う条件が揃っていたとしても、もう一度取得するためのアクセスを行います。

その理由は、以下のようです。

  1. リロードするということは、何らかの理由によりウェブページが正常に読み込まれなかった可能性があるため、もう一度元のウェブページにアクセスし直した方が良い。
  2. そのウェブページは内容が更新されているはずなので、その時表示されているのは古いまま(キャッシュが使用されている)であったから、リロードしようとした可能性がある。なので、もう一度元のウェブページにアクセスして最新の内容を取得した方が良い。

但し、少し違うのは Last-ModifiedETag といった 検証子 (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-ModifiedETag といった 検証子 (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種類のリロード操作を選ぶことができます。

Chrome でのリロード(再読み込み)選択肢
Chrome でのリロード(再読み込み)選択肢
リロード(再読み込み)の種類 説明
通常の再読み込み 文字通り、通常のリロードです。
ハード再読み込み 「キャッシュ コンテンツを無視して現在のページを再読み込みする」を指しています。
キャッシュの消去とハード再読み込み キャッシュを消去してから、ハード再読み込みを行うようです。

6. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

HTML

HTMLの雛形 (CSS, JavaScriptも)

HTMLの雛形 (CSS, JavaScriptも) を載せています。コピーして使えます。

Web

script 要素の src属性に .js 以外の拡張子を指定してもエラーにはならない

script タグの src属性に .js 以外の拡張子を指定してもエラーにはならないという話です。

Web

Notification API のポイント解説

目次1. はじめにNotification API が行うこと補足2. Notification API の使い方(1) デスクトップ通知が許可されているかどうかを取得する。(2) ユーザーにデスクト …

no image

ドメインに関して気を付けること

目次TLS証明書ドメインの乗っ取り1. TLS証明書が発行されてしまうとまずい2. メールアドレスが利用されてしまう TLS証明書 証明書の期限を短くする。 ドメインの乗っ取り 1. TLS証明書が発 …

Web Vitals

Web Vitals patterns の Responsive Images を試してみました

Web Vitals patterns に載っている「Responsive Images」を実際に試してみました。