bfcacheとは？注意点・対策方法・persistedプロパティなどを解説！

この記事では『bfcache』について

• bfcacheとは
• bfcacheの注意点
• bfcacheの対策方法
• bfcacheを判断するpersistedプロパティ

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

bfcacheとは

bfcacheは「Back-Forward Cache」の略であり、ユーザが一度訪れたWebページの状態をキャッシュとしてメモリ上に保存するブラウザの機能です。

通常、ブラウザの「戻る」や「進む」ボタンのクリックによって、Webページに再度アクセスすると、ブラウザはWebページの情報をサーバーから再度取得してレンダリングを行います。しかし、bfcasheを用いると、すでに保存されているキャッシュからWebページを読み込むため、サーバーからWebページの情報を取得する必要がなくなります。その結果、Webページの表示速度が大幅に向上します。

なお、すべてのブラウザがbfcacheをサポートしているわけではありません。2023年時点ではSafariとFirefoxがbfcacheをサポートしています。

bfcacheの注意点

bfcacheはキャッシュした時点のWebページの状態をメモリに保存します。そのため、リアルタイムに更新されるWebページやユーザの操作によって変化するWebページなど動的な内容を含む場合には、期待通りのWebページが表示されないことがあります。

bfcacheの対策方法

bfcacheは以下のような処理で対策可能です。

window.addEventListener('pageshow', function (event) {
    //Webページがキャッシュから読み込んでいるか
    if (event.persisted) {
        //強制リロード
        window.location.reload();
    }
});

// onpageshowを用いてもOK
window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

ユーザーがブラウザの「戻る」や「進む」ボタンをクリックして、Webページが表示されると、pageshowイベントが発火します。このイベントをaddEventListenerにより捕捉します。

また、PageTransitionEventオブジェクトのpersistedプロパティの値を利用します。persistedプロパティはWebページがキャッシュから読み込んだ場合にはtrue、Webページを直接読み込んだ場合にはfalseを返します。つまり、bfcache機能によりWebページが表示されている場合にはtrueになるということです。

Webページがキャッシュから読み込まれている場合には、window.location.reload()でブラウザのリロードを実行します。

window.location.reload()を呼び出すとページ全体がリロードされるため、ユーザーエクスペリエンスに影響を及ぼす可能性があります。リロードを避けたい場合は、bfcacheが原因で表示が崩れている部分を修正するための別のJavaScriptコードを書くことも考慮しましょう。

本記事のまとめ

この記事では『bfcache』について、以下の内容を説明しました。

• bfcacheとは
• bfcacheの注意点
• bfcacheの対策方法
• bfcacheを判断するpersistedプロパティ

お読み頂きありがとうございました。