Web

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

投稿日:2022年6月22日 更新日:

1. はじめに

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

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

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

デモページ

🔗 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] パネルには何も表示されません。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Chrome

Chrome 96 で絵文字を太字にすると色がなくなる問題

Chrome 96 で絵文字を太字にすると色がなくなる問題について書いています。

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …

Chrome

Chrome のアドレスバーから任意のサイトの検索機能を使用する方法

目次1. Chrome の検索エンジン管理機能2. 任意サイトの検索機能を Chrome に追加して使用する1. アルクのサイトで検索したときの URL を調査する2. 検索エンジンとして追加する3. …

Web

Uptime Robot を使ってウェブサイトの死活監視を行う

Uptime Robot というウェブサイトの死活監視サービスの使い方を説明します。

Web

Firefox で複数のプロファイルを使い分ける方法

目次1. Firefox のプロファイルについて2. プロファイルによって管理できるもの3. プロファイルの場所プロファイルの場所の確認方法4. プロファイルマネージャープロファイルマネージャーの起動 …