bfcache を体験するページを作りました

1. はじめに

bfcache を体験するためのページを作りました。

bfcache というのは、ブラウザの「戻る(Back)」もしくは「進む(Forward)」を実行した際に、再びサーバーにアクセスしてページを取得するのではなく、ブラウザが保持したキャッシュを利用して画面を瞬時に表示する機能です。JavaScript により何らかの処理を行っていたとしても、それも引っくるめて状態が維持されます。

この bfcache の動作を体験するページを作ってみました。

2. 利用手順

利用手順はリンク先のページにも書いてありますが、ここにも書いておきます。

(1) Chrome のシークレットウィンドウを開いて、デモページを開きます（拡張機能の影響を避けるため）。

(2) [Click me!] というボタンを押し、JavaScriptによって画面上に文字列を表示します。

(3) 一度「Topページ」に遷移してから、ブラウザバックでデモページに戻ります。

(4) (2)の文字列が残ってれば、bfcache が効いているはずです。動作ログや DevTools の Console も確認します。

3. ポイント1

Chromeの拡張機能を動作させないため、シークレットウィンドウを使うのがポイントです。拡張機能が bfcache の最適化を邪魔する可能性があります。

逆に言うと、特定の拡張機能を導入しているのが原因で、普段ブラウザを使っているときに、本来 bfcache が効くページであっても bfcache が利用されていない可能性があります。

4. ポイント2

bfcache によってページが開いた場合、Chrome DevTools の [Network] パネルには何も表示されません。