Soon Gud Story

자바스크립트 백스페이스 javascript history.back BFCache 이슈 

사용자가 백스페이스를 누르거나 history.back 이벤트가 발생하면

브라우져는 일단 이전 페이지 캐시가 있는지 확인하며 있다면 캐시 페이지를 보여줍니다.

이때 캐시를 Back-Forward Cache 라고 말합니다.

페이지 응답속도를 빠르게 하고자 하는 방식이지만, 페이지에 대한 추가적인 load 이벤트가 없어

개발자의 의도와 다른 페이지를 보여주는 경우도 있습니다.

이때 문제점을 해결코자 2009년에 pageshow/pagehide 라는 이벤트가 생겼고

persisted 라는 boolean 형의 변수에 bfcache를 사용했는지 안했는지를 알려줍니다.

하지만 이 변수에도 브라우저별 OS별 버그가 발견되었습니다.

해당 버그를 FF, IE 에서는 수정하였으나, 

사파리나 크롬에서는 2016년에 해당 버그가 있다는건 알고 있다 발표했지만 수정하지 않고 있습니다.

window.performance.navigation.type 변수의 값이 1면 새로운 페이지를 로딩해서 불러온 것이고

window.performance.navigation.type 변수의 값이 2면 bfcache를 사용한 것이라고 합니다.

결론은 아래 코드로 모든 브라우져에서 동작합니다

window.onpageshow = function(event) {

   if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {

       cartCalc(); // 

   }

};