BF Cache (Back-Forward Cache)

브라우저 호환성

Chrome, Firefox, Safari에 포함

 

BFCache와 일반적인 캐시(Cache) 차이점

 

일반적인 HTTP 캐시는 서버에서 가져온 응답 데이터(HTML, CSS, JS 등)를 저장하지만, BFCache는 페이지의 전체 상태(스크롤 위치, 입력값, JavaScript 실행 상태 등)를 메모리에 저장

	HTTP 캐시	BF 캐시
저장 내용	HTML, CSS, JS 파일	페이지 전체 상태
저장 위치	디스크/메모리	메모리(RAM)
뒤로 가기/앞으로 가기	새로고침 필요	즉시 복원
JavaScript 상태	초기화됨	그대로 유지됨

 

 bfcache는 JavaScript 힙을 포함하여 메모리에 있는 전체 페이지의 스냅샷인 반면 HTTP 캐시에는 이전에 이루어진 요청에 대한 응답만 포함

 

 

 

BFCache 선행 조건

-. window.onunload 이벤트를 사용하지 않는 경우

   window.onunload 이벤트 대신 pagehide 이벤트 사용
-. 특정 보안 정책(예: Cross-Origin-Opener-Policy: same-origin)이 적용되지 않은 경우
-. 메모리가 충분할 경우

 

BFCache 비활성화 조건

-.  window.onunload 또는 window.onbeforeunload 이벤트를 사용하는 경우
-.  Cache-Control: no-store 또는 특정 HTTP 헤더 설정이 있는 경우

    Cache-Control: no-store 같은 헤더를 피하기
-.  iframe 내부에서 cross-origin 리소스를 로드하는 경우
-.  WebSocket, IndexedDB, Web Locks API 등 특정 API를 사용한 경우

 

 

BFCache를 활용하려면 HTTP 헤더를 조정하여 캐시를 차단하지 않도록 하고, JavaScript에서 pageshow 및 pagehide 이벤트를 적절히 활용

// Cache-Control 및 Pragma 관련 헤더 제거 response.setHeader("Cache-Control", "public, max-age=86400"); // 캐시 허용 response.setHeader("Pragma", ""); // Pragma 헤더 제거 response.setHeader("Expires", ""); // Expires 헤더 제거

 

 

pageshow 이벤트는 페이지가 처음 로드될 때 load 이벤트 직후에 발생하며 언제든 페이지가 bfcache에서 복원될 때 발생합니다. pageshow 이벤트에는 persisted 속성이 있습니다. 이 속성은 페이지가 bfcache에서 복원된 경우 true이고 그렇지 않은 경우 false입니다. persisted 속성을 사용하여 일반 페이지 로드와 bfcache 복원을 구분할 수 있습니다. 예를 들면 다음과 같습니다.

 

 

UnloadHandlerExistsInSubFrame

    window.onunload 이벤트 사용

 

BrowsingInstanceNotSwapped

    보안 정책 (Cross-Origin-Opener-Policy: same-origin)

    window.opener 사용

    Cache-Control: no-store 설정