| GreenIT | V2 | V3 | V4 |
|---|---|---|---|
| 28 | 5 | 7 |
| ライフサイクル | サードパーティ | 担当者 |
|---|---|---|
| 2. 設計 | ユーザ/端末 | UX/UI Designer |
| 優先度 | 実装難易度 | エコロジーへの影響度 |
|---|---|---|
| 3 | 4 | 3 |
| リソース |
|---|
| プロセッサ / ネットワーク |
ブラウザには、履歴内での高速ナビゲーション機能（「前のページ」と「次のページ」のボタン）があり、これは一般に_back-forward cache_または_bfcache_と呼ばれます。
HTTPキャッシュが以前に行われたリクエストへの応答をメモリに保持し、それらを何度も無駄に生成するのを避け、ページのロードを高速化するのとは対照的に、_bfcache_はページ全体をメモリに保持することができます。 しかし、この機能の使用はユーザー側のマシンリソースを追加で使用するため、_bfcache_で保存されるページの機能をできるだけ軽くする必要があります。 さらに、_bfcache_の使用には、待機時間が超過した場合（_setTimeout_など）など、いくつかの注意が必要です。 実際、ブラウザは待機中のタイマーやJavaScriptのキュー内のタスクの実行を一時停止し、ページが_bfcache_から復元されたときにタスクの処理を再開するため、問題が発生する場合があります。 例えば、IndexedDBトランザクションやAPIの使用に必要なタスクが一時停止され、その時点で同じIndexedDBデータベースを使用する他のタブが開かれている場合、ブラウザは異なるページをキャッシュしません。
したがって、ページを_bfcache_に適格にする要素を避ける必要があります。 また、ページを離れた後にページを使用不能にする要素、 （またはページが再利用されるとき、またはキャッシュされる直前に再利用可能にする）も避けるべきです。
避けるべき点 :
- ページを離れる際のアクション（unloadまたはbeforeunloadイベント、本当に必要な場合はpagehideを使用）
- 新しいタブ/ウィンドウを開くリンクで、rel="noopener"またはrel="noreferrer"がない場合
- ユーザーがページを離れるときに接続（IndexedDB、fetch()またはXMLHttpRequest、Web Socketsなど）を開いたままにする
必要な要素をリセットするために、pageshowおよび/またはpagehideイベントを使用する。 例：フォームのボタンを送信時に無効にし再有効にする、 または機密情報（パスワードなど）を削除する、 または持続的な接続を閉じたり開いたりする。
Source:
- https://web.dev/bfcache/ (CC BY 4.0ライセンスのコンテンツ - Philip Waltonによる_Back/forward cache_)
| 検証項目 | 次の値以下である |
|---|---|
| _bfcache_に適格でないページの割合 | 0% |