BFCache 알아보기

• BFCache란 backwards / forwards Cache의 약자로 브라우저가 렌더링된 웹 페이지의 스냅샷을 메모리에 저장해 두었다가, 사용자가 뒤로 또는 앞으로 이동할 때 즉시 페이지를 렌더링하는 메커니즘입니다.
• 이 기능 덕분에 페이지가 빠르게 전환되며, BFCache가 없을 경우에는 브라우저가 웹페이지를 처음부터 다시 로드하고 모든 리소스를 재다운로드해야 합니다.

1. BFCache 동작 방식

• BFCache는 웹페이지의 스냅샷을 메모리에 저장하며, 이 과정에서 자바스크립트 코드의 실행이 일시 중지됩니다.
• 페이지가 다시 로드되면 중단된 코드(setInterval, setTimeout, 이행되지 않은 프로미스 등)가 아무 일도 없었던 것처럼 재개됩니다.
• 그러나 indexedDB 트랜잭션이 진행 중일 때는, 트랜잭션이 완료되지 않으면 브라우저는 페이지를 BFCache에 저장하지 않습니다.
• 브라우저는 합리적인 상황에서만 페이지를 BFCache에 캐시하며, 대부분의 주요 브라우저는 이 기능을 지원합니다.

2. 웹페이지에 BFCache 호환

• BFCache에서 제공되는 페이지의 수명 주기 이벤트가 중요합니다.
• pageshow 이벤트를 통해 BFCache 페이지의 로드를 감지할 수 있으며 event.persisted를 통해 페이지가 BFCache로부터 복원되었는지 알 수 있게 됩니다.

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // bfcache에서 페이지 복원
  }
});

• 웹 서버가 Cache-control: no-store 헤더를 전송하면 브라우저는 BFCache를 사용하지 않도록 지시받습니다. 이 헤더는 원래 HTTP 캐시에만 적용되어야 하므로 주의하여야 합니다.

3. BFCache 테스트

• 크롬 개발자 도구에서 Back/forward cache를 테스트 할 수 있습니다.
• 캐시 테스트 버튼을 누르면 크롬이 자동으로 웹페이지를 이동 후 다시 돌아와 페이지가 캐시를 사용했는지를 표시합니다.
• 만약 성공하면 녹색으로 확인 표시가 보여지며 실패할 경우 실패한 이유가 보여집니다.

참고

• https://web.dev/articles/bfcache?ref=sabatino.dev&hl=ko
• https://www.sabatino.dev/bfcache-explained/