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

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

関連記事

Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch を紹介します。

Chrome

Webページが読み込まれる際、HTMLは分割されてパースされます

Webページが読み込まれる際、HTMLが分割されて段階的にパースされる様子を観察します。

Web

閲覧しているウェブページで利用されている HTTP のバージョンを確認する方法

ウェブブラウザで ウェブサイトを閲覧している際、HTTP のどのバージョンが使われているのか確かめる方法を紹介します。 目次Chrome の場合FirefoxEdge Chrome の場合 (1) ウ …

Glitch

Glitch で PHP を使う方法

Glitch は正式にPHPをサポートしていませんが、ほんの少しの設定変更により、PHPが使えるようになります。

Web

<pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」

<pre><code>タグが、モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」を引き起こしていました。