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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

Notification API のポイント解説

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

MathJax を試してみました。

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。 基本的な使い方は、 HTMLファイルに以下を記述して MathJax.js を読み込みます。HTMLフ …

DokuWiki

DokuWiki: Layout Switcher Plugin

DokuWiki用プラグイン「Layout Switcher Plugin」のページです。 目次1. 概要2. インストールと設定(1) プラグインファイルのダウンロード(2) プラグインをサーバーに …

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

Google

【Google】アカウント無効化管理ツールの設定

Google の「アカウント無効化管理ツール」について説明します。