読者です 読者をやめる 読者になる 読者になる

君は3つのリロードを知っているか?

はい、今さら聞けないウェブ開発者の基礎知識のお時間です。
ブラウザには3つの読み込みモードがあることはご存知ですか?
2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。

  1. リロード
    • 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。
  2. スーパーリロード
    • ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。スーパーですね。
  3. ページ遷移(リフレッシュ)
    • 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといった方法で実現できます。むしろこれこそが普通です。

id:edvakfさん曰く、Operaにはリクエストを投げずに更新するRefresh Displayというアクションがあるらしい。確かにリフレッシュというのは適切な名前な気がする。

それぞれどう違うのか、特に1つ目と3つ目はどう違うのか不思議でしょうか?
ちゃんとリクエストの様子を眺めてみると違いがよく分かります。

リロード

f:id:os0x:20110617120324p:image

スーパーリロード

f:id:os0x:20110617120326p:image

ページ遷移

f:id:os0x:20110617120325p:image

リロードは大元のHTMLを受け取ったら、そのページ内のリソースについてレスポンスヘッダを確認しに行っています。その結果304 Not Modifiedが帰ってきて、実際にはキャッシュを使っています。
対してスーパーリロードはキャッシュに関係なく、すべてのリソースを取得しなおしています。
そしてページ遷移時は、キャッシュがあり、Expireが効いている場合はそもそもリクエストを送っていません。完全にローカルキャッシュだけを使っています。
(ちなみに、ページを進んで(ブラウザの戻る機能で)戻ったときは大元のHTMLを含めてキャッシュが使われたりします。)

なお、当然ですがすべてのブラウザがこの3つのモードを持っているわけではありません。Operaにはスーパーリロードに相当する手段がなさそう(知らないだけかもしれませんが)だったりします。

というわけで、3つのリロードの違いを意識して、開発時に使い分けるのがウェブ開発者のたしなみです。