ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io

Tags

Top Highlights

• 現在の Web は 1 つのページが非常に多くのサブリソースに依存している。

• このキャッシュがヒットするところが見たい場合は、以下のようなリンクをクリックし、そこに遷移すれば良い。もちろん、 "Disable Cache" は無効にする。

• 結論から言うと、これらの勘違いは全て「ブラウザをリロードしながら DevTools の Network パネルを見ている」ことが原因だ。

• Navigation とは、要するにリンクをクリックした場合に発生する画面遷移のリクエストだ。

• このリクエストに対し、 Fresh なレスポンスが Store されていれば Reuse される(意訳: ブラウザにキャッシュがあればヒットする)。

• Reload は、画面の更新だ。ブラウザの URL バーの隣にあるリロードボタンや、 CMD-r / F5 などで実行される。

• Reload はそもそも、何らかの理由で壊れた画面の修復や、最新情報への更新のために実装されている。したがって、「キャッシュが再利用されてほしくない」というのがユーザの要求であるため、当然のように、ブラウザが Fresh なレスポンスを Store していようがいまいが、バイパスして Origin にリクエストする。(意訳: サーバに最新の HTML を取りに行く)

• 普段、結果の表示を Reload でデバッグしている癖でやってしまいがちではあるが、「Reload の挙動は Navigation とは違う」という点は、 Cache 周りをいじっているなら念頭におきたい

• Force Reload は Super Reload などとも呼ばれ、 Shift + Reload や DevTools の "Disable Cache" 相当の機能を有効すると発生するものだ。

• 一般ユーザによる実行ではなく、開発者が実行するという意図で実装されている

• 答えは、最初に言ったように Navigation を用いることだ。

• 特に最近のサブリソースは、ビルド結果のハッシュを URL に付与し、キャッシュバスティングするケースが多い。そうしたサブリソースは内容が一切変更されず、内容を変更する場合は URL が変更されることになる。

• そこで、「このリソースは更新されないからリロード時に取得し直す必要がない」と明示的に示す immutable が定義された。

• Firefox と Safari はこれを実装している。しかし Chrome は実装をしてない。

• Reload 時にはメインリソースのみを再取得し、サブリソースはimmutable がデフォルトという実装に変更されている。

• 先ほどの「リロードしながらキャッシュの挙動を観察する」においては、 Chrome でサブリソースは常にキャッシュがヒットしている状態と考えることができる。