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. ポイント

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

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

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Programming

Import maps の使い方

Import maps の使い方について説明します。

Web

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)について説明します。

Chrome

Chrome 96 で Lighthouse の検査が終わらない問題が修正されました

Chrome 96で Lighthouse の検査が終わらない問題について書きました。

HTML

HTMLの雛形 (CSS, JavaScriptも)

HTMLの雛形 (CSS, JavaScriptも) を載せています。コピーして使えます。

no image

ドメインに関して気を付けること

目次TLS証明書ドメインの乗っ取り1. TLS証明書が発行されてしまうとまずい2. メールアドレスが利用されてしまう TLS証明書 証明書の期限を短くする。 ドメインの乗っ取り 1. TLS証明書が発 …