사파리와 파이어폭스 그리고 크롬의 차이점은 bfcache이다. (2탄-상세기록)

bfcache란

js heap까지 포함하여 페이지 전체를 다 캐시로 저장한다. 고로 전체 페이지의 정보가 메모리에 저장되어 있기 때문에 사용자가 이전 페이지로 복귀했을 때, 메모리에 저장된 정보를 노출하여주고, 결론적으로 빠른 페이지 로드가 가능하다.

 

bfcache 동작 방식

페이지 전체(heap 포함)를 스냅샷을 떠 메모리에 올린다. (<-> 이와 반대로 HTTP 캐시는 단순 이전 요청에서 이루어진 응답만 캐싱하기 때문에 둘의 동작 방식은 조금 다르다) 모든 페이지를 스냅샷 뜨기 때문에 bfcache는 항상 빠르다.

만약 setTimeout 등의 함수가 동작하는 경우에는 어떻게 될까?

task queue에 있는 모든 작업을 일시정지하고, 페이지가 복원되었을 때 해당 작업을 재실행한다. (개인적으로 이게 항상 좋은 결과를 내는 방법이라 생각하지는 않는다.)

 

bfcache를 관찰하는 방법

다음의 addEventListener를 이용한다.

• pageshow : 페이지 정상 로드(in), bfcache로부터 페이지 복원 될 때, 발생
• pagehide : 페이지 정상 언로드(out), bfcache의 저장 시작 시, 발생
  persisted 속성이 false 일 때는 page가 bfcache되지 않음

크로미윰에서는 freeze와 resume로 확인할 수 있다. 

https://developer.chrome.com/blog/page-lifecycle-api/

page lifecycle API

 

https://developer.chrome.com/blog/page-lifecycle-api/

Page Lifecycle API - Chrome Developers

 

주의할 점

• unload 이벤트 금지
  unload 이벤트는 bfcache 이전에 발생하고, unload가 발생한 후에는 페이지가 더이상 존재하지 않는다고 생각하면 된다. 그렇기때문에 파이어폭스는 unload 이벤트를  bfcache 하기에 적합하지 않은 페이지로 인지한다. unload 이벤트를 사용하고 싶다면 pagehide를 사용하는 것이 더 맞는 접근이다.
  
  
• beforeunload 이벤트 금지
  beforeunload는 크롬과 사파리에서는 정상 동작을 하지만 파이어폭스의 경우 bfcache를 무력화 시킨다. 
  
  
• PV 수
  bfcache로 로드된 페이지는 페이지 로딩이 아닌 복원으로 인지하기 때문에 pv수를 증가시키지 않는다. 하지만 성능 측정시에는 로드로 인정되어 빠른 페이지 로드라고 체크한다. 이는 성능측정의 그래프 신뢰도를 줄어들게 한다.

 

 

https://hyermione.tistory.com/124

사파리와 파이어폭스 그리고 크롬의 차이점은 bfcache이다. (1탄)