브라우저 bfcache (back forward cache)

bfcache란 back / forward cache 의 약자로 사용자가 페이지 히스토리를 통해 앞뒤로 이동할 때 페이지 전체의 스냅샷 (js heap 포함)을 저장하는 메모리 내부 캐시이다. bfcache가 활성화되면 앞뒤로 이동시, 네트워크에 전혀 연결하지 않고 즉각 메모리로부터 해당 웹페이지를 로드한다.

safari, firefox에서는 전부 지원되어 왔었고, chrome은 버전86(2020 년 12월)부터 점진적으로 적용해왔다가 버전96(2021년 12월) 부터는 모든 chrome 유저가 사용할 수 있도록 지원되고 있다.

bfcache를 활용하면 좋지만, 브라우저마다 틀리게 동작하고 높은 확률로 캐시가 안되는 케이스도 많으므로 가만하여 사용해야 한다.

작동 조건

브라우저마다 bfcache가 작동하거나 작동하지 않을때가 있다.

safari의 경우 bfcache가 거의 항상 일어난다.

하지만 크롬이나 크롬과 유사 엔진을 사용하는 브라우저는 bfcache가 발생하지 않는 너무 다양한 케이스가 있으며, 개발자도구를 이용해서 테스트 해볼 수 있다.

예를 들면 삼성브라우저의 경우 2023년 12월 13일 이 글을 쓰는 시점에서 history.pushState와 같은 api를 통해 사용하자 임의로 history를 변경하면 bfcache가 동작이 깨진다(크롬은 정상동작한다).

안드로이드 삼성브라우저의 경우도 크롬 개발자 도구로 디버깅 해볼 수 있다(같은 Blink 기반 엔진을 사용해서 가능한듯 하다).

bfcache 감지 이벤트

크롬 개발자 도구 > 애플리케이션 > 백그라운드 서비스 > 뒤로앞으로 캐시 메뉴에서 테스트 할 수 있다.`

스크립트로 확인하려면 브라우의 pageshow, pagehide 이벤트를 감지하는 함수를 걸어 놓고 event.persisted 값을 확인하면 캐시 유무를 확인할 수 있다고 한다.

bfcache 최적화

• 브라우저마다 미세하게 최적화 하는 방법이 틀리지만 일반적으로 bfcache가 더 높은 확률로 작동하게 하는 규칙이있다고 한다
  • (자세한 내용은, 크롬 개발도구에 직접 링크가 걸려있는 블로그 문서를 참고하면 좋다)
    • unload 이벤트 사용 안 하기
    • window.opener 참조 피하기
    • 사용자가 다른 곳으로 이동하려 할 시 기존 연결 닫기
    • bfcache로부터 복원 후 오래되거나, 민감한 데이터 업데이트