君は3つのリロードを知っているか？
はい、今さら聞けないウェブ開発者の基礎知識のお時間です。
ブラウザには3つの読み込みモードがあることはご存知ですか？
2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。
- リロード
- 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。
- スーパーリロード
- ページ遷移(リフレッシュ)
- 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといった方法で実現できます。むしろこれこそが普通です。
id:edvakfさん曰く、Operaにはリクエストを投げずに更新するRefresh Displayというアクションがあるらしい。確かにリフレッシュというのは適切な名前な気がする。
それぞれどう違うのか、特に1つ目と3つ目はどう違うのか不思議でしょうか？
ちゃんとリクエストの様子を眺めてみると違いがよく分かります。
リロード
スーパーリロード
ページ遷移
リロードは大元のHTMLを受け取ったら、そのページ内のリソースについてレスポンスヘッダを確認しに行っています。その結果304 Not Modifiedが帰ってきて、実際にはキャッシュを使っています。
対してスーパーリロードはキャッシュに関係なく、すべてのリソースを取得しなおしています。
そしてページ遷移時は、キャッシュがあり、Expireが効いている場合はそもそもリクエストを送っていません。完全にローカルキャッシュだけを使っています。
(ちなみに、ページを進んで(ブラウザの戻る機能で)戻ったときは大元のHTMLを含めてキャッシュが使われたりします。)
なお、当然ですがすべてのブラウザがこの3つのモードを持っているわけではありません。Operaにはスーパーリロードに相当する手段がなさそう(知らないだけかもしれませんが)だったりします。
というわけで、3つのリロードの違いを意識して、開発時に使い分けるのがウェブ開発者のたしなみです。
