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

프론트앤드 개발자라면 아마 높은 확률로 사파리 브라우저를 좋아하지 않을거라 생각이 든다. 혹은 크롬을 좋아하지 않거나. 아무튼 두 개를 동시에 좋아할 수는 없다. 왜냐면 둘은 함께 할 수 없으니까!

개발을 하며, 브라우저 호환성에 대해 고민해보지 않은 개발자는 없을것이다. (만약 고민한 적이 없다면 반성해야 할 일..!) 그 차이 중 하나가 바로 bfcache이다.

bfcache란 Back-Forward Cache로 사파리나 파이어폭스에서 이전 페이지를 빠르게 로딩하기 위해 스냅샷을 떠서 기억하고 있는 시스템이라고 생각하면 된다. (크롬에서는 96버전 이후부터 사용이 가능하다.) 이게 어떤 장점이 있는지 명확하게 보여주는 아주 좋은 유튜브를 찾았다.

https://youtu.be/cuPsdRckkF0

크롬 사용 데이터에 따르면 데스크톱 기준 10번 중 1번, 모바일 기준 5번 중 1번 뒤로가기 혹은 앞으로가기 기능을 사용하는 것으로 알려져있다. bfcache가 활성화 되면 매우 빠른 체감의 페이지 움직임을 체험할 수 있다.

여기서 문제는 페이지를 떠났다가 뒤로 가기로 다시 돌아왔을 경우, 사파리와 파이어폭스는 기존 스냅샷을 찍은 페이지를 그대로 로드하기 때문에 새로고침현상이 일어나지 않고, 크롬은 새로 그리기 때문에 조금 다르게 동작한다. (특이한 점은 나 같은 경우에는 크롬은 그대로 유지하였지만 사파리에서는 리로드 되는 현상이 발생했다.)

참고하면 좋은 글

https://web.dev/i18n/ko/bfcache/

캐시 뒤로/앞으로

 

https://ui.toast.com/weekly-pick/ko_20201201

이전/다음 페이지 캐시

 

https://hyermione.tistory.com/126