뒤로가기와 앞으로가기를 빠르게 하는 BFCache

BFCache에 대해 알아보겠습니다.

BFCache

Back/Forwards Cache의 약자로, 렌더링된 페이지의 전체 스냅샷을 메모리에 보관하는 메커니즘

bfcache

• 뒤로 또는 앞으로 이동할 때, 웹페이지가 로딩 시간 없이 거의 즉시 렌더링 됨
• bfcache가 없으면 브라우저는 전체 웹페이지를 처음부터 로드해야 함

크롬 사용 데이터에 따르면, 데스크탑 탐색 10개 중 1개, 모바일 탐색 5개 중 1개는 뒤로 또는 앞으로 이동

BFCache 동작 방식

자바스크립트

• 전체 자바스크립트 힙이 메모리에 저장되고 진행중인 코드의 실행이 일시중지됨
• setInterval 또는 setTimeout으로 실행이 예약된 코드는 아무 일도 없었던 것처럼 bfcache에서 페이지가 제공될 때 다시 시작됨
• 이행되지 않은 프로미스도 마찬가지

indexedDB

• indexedDB 트랜잭션을 다룰 때 동작은 조금 더 까다로워지는 경향이 있음
• 트랜잭션이 진행중일 때 사용자가 페이지에서 다른 곳으로 이동하면 사용자가 떠나기 전에 연결이 닫히지 않는 한 브라우저는 bfcache에 페이지를 캐시하지 않음

일반적으로 브라우저는 사용자의 편에 서서 합리적이라고 판단되는 경우에만 웹페이지를 bfcache에 캐시함

대부분의 주요 브라우저는 모바일과 데스크탑 모두에서 어떤 형태로든 bfcache를 지원

웹페이지를 BFCache와 호환되도록 만들기

bfcache에서 제공되는 페이지의 수명 주기 이벤트를 알아두는 것이 중요

load 이벤트

• bfcache에서 페이지가 로드될 때 발생하지 않음

pageshow 이벤트

• 페이지가 새로 로드될 때와 복원될 때 모두 트리거됨
• event.persisted 속성을 통해 페이지가 bfcache에 의해 복원되었는지 확인 가능

window.addEventListener("pageshow", (event) => {
  if (event.persisted) {
    console.log("This page was restored from the bfcache.");
  } else {
    console.log("This page was loaded normally.");
  }
});

pagehide 이벤트

• 사용자가 다른 페이지로 이동중일 때(unload될 때) 트리거됨
• persisted 속성을 통해 bfcache를 관찰할 수 있으나 true라고 해도 페이지가 성공적으로 캐시되었는지는 알 수 없음
• 단지 브라우저가 페이지를 캐시하려고 했다는 사실만 알 수 있음
• false는 확실하게 캐시되지 않았다는 것을 의미

unload 이벤트 수신과 같은 일부 작업은 페이지가 bfcache에 들어가지 못하게 하므로 대신 pagehide 이벤트를 수신하고 unload 이벤트 리스너를 항상 추가하지 않도록 할 것

unload 이벤트는 이전부터 사용되어 왔으며 현재 레거시 API로 간주됨

Cache-Control: no-store 헤더

• 웹 서버가 응답에 설정할 수 있는 HTTP 헤더로, 브라우저가 응답을 HTTP 캐시에 저장하지 않도록 지시
• bfcache는 HTTP 캐시가 아니지만 Cache-Control: no-store를 사용하는 페이지에서는 bfcache를 사용할 수 없음
• Cache-Control: no-store의 사용을 최소화할 것

기술적으로 이 헤더는 HTTP 캐시에만 사용되어야 하고 bfcache는 HTTP 캐시가 아니므로 이 동작은 변경될 것

테스트

크롬 개발자도구 - 애플리케이션 - Background services - Back/forward cache

참고

(번역) BFCache 알아보기

Back/Forward Cache (A.K.A. bfcache)

뒤로 및 앞으로 캐시