bfcache の動作を観察する

1. このページの目的

bfcache の動作を観察する。

2. bfcache の動作テスト

2-1. 「戻る(Back)」を試す手順

(1) Chrome のシークレットウィンドウを開いて、このページを開く(拡張機能の影響を避けるため)。

(2) ⬅ ここを押して、JavaScriptによって以下に文字列を表示する。

(3) Top ⬅ このリンクをクリックしてTopページに移動し、ブラウザバックでこのページに戻る。

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

2-2. 動作ログ

動作ログは以下に表示される。

2-3. 結果

(2)の文字列はちゃんと残っている。

また、Console はこんな感じになる。

Consoleの様子
Consoleの様子

2-4. 「進む(Forward)」を試す手順

(1) Chrome のシークレットウィンドウを開いて、Topページを開く(拡張機能の影響を避けるため)。

(2) Topページ上の「bfcache の動作を観察する」リンクをクリックする。

(3) ブラウザバックで、Topページに戻る。

(4) ブラウザフォワードで、このページに進む。

こちらの結果は省略する(「戻る(Back)」と同じなので)。

3. DevTools による動作テスト

DevTools の [Application]パネルで、ページが bfcacheに最適化されているかテストできる。

Chrome DevToolsは、ページをテストしてbfcache用に最適化されていることを確認し、ページの適格性を妨げる可能性のある問題を特定するのに役立ちます。

特定のページをテストするには、Chromeでそのページに移動し、DevToolsで**[アプリケーション]** > [バックフォワードキャッシュ] に移動します。次に、[テストの実行] ボタンをクリックすると、DevToolsは前後に移動して、ページをbfcacheから復元できるかどうかを判断します。

引用元:バック/フォワードキャッシュ

bfcacheが使えない(最適化されていない)場合は、以下のように表示される。

Back/forwad cache のテスト(NGな場合)
Back/forwad cache のテスト(NGな場合)

上記のスクリーンショット内に、"The page has an unload handler in the main frame." とあり、これが原因であることが分かる。

このときは、Chrome拡張機能が unload handler を使っていることが分かった。

そこで、シークレットウィンドウで開いたら、OKとなった。

Back/forwad cache のテスト(OKな場合)
Back/forwad cache のテスト(OKな場合)

4. メモ

5. 参考