(BFCache) 웹브라우저 캐시와 뒤로가기

정은경·2021년 11월 26일
0

👸 Front-End Queen

목록 보기
174/271

문제상황

바닐라로 작성한 웹페이지

  1. index.html 접근
  2. 클릭이벤트 실행
  3. 다음 페이지 이동
  4. 뒤로가기실행

위의 순서로 실행을 하게 되면,
뒤로가기 실행을 하면 "클릭이벤트를 실행하지 않아도!!! 클릭이벤트가 이미 실행되어 있다!!"
왜냐하면 "Back Forward Cache" 때문

Back Forward Cache (BFCache)

  • 페이지에 대한 추가적인 로딩을 하지 않고 자바스크립트 상태까지 유지한다고 함!
  • The "cache" used by bfcache is different from the HTTP cache (which is also useful in speeding up repeat navigations). The bfcache is a snapshot of the entire page in memory (including the JavaScript heap), whereas the HTTP cache contains only the responses for previously made requests.

해결방법

  • pageshow/pagehide 이벤트 사용하기

  • pageshow 이벤트의 경우, 뒤로가기로 재진입한 경우에도 발생하는 이벤트

  • 페이지가 열릴 때마다 수행되어야하는 코드가 있다면, pageshow 이벤트에 바인딩하는 것이 더 바람직

  • 콜백으로 넘겨지는 event 파라미터의 속성 중 persisted가 true인 경우, BFCache로 부터 복원된 상태(뒤로가기 등으로 재진입한 상태임)

  • 바닐라

window.onpageshow = function (event) {
	if (event.persisted) {
    	console.log('BFCache로부터 복원된 것');
    }
  	else {
    	console.log('새로 열린 페이지');
    }
};
  • jquery
$(window).bind("pageshow", function (event) {
	if (event.originalEvent.persisted) {
    	console.log("BFCahe로 부터 복원 된 것");
    }
    else {
    	console.log("새로 열린 페이지");
    }
});

질문

  • 리액트로 작성한 웹페이지는 위와 같은 상황이 발생하는 가?
    * 리액트는 SPA
    • url에 따른 이동은 router 라이브러리를 사용해야함
      * 리액트는 브라우저 히스토리를 사용하려면 history 라이브러리를 이용함
    • history 라이브러리를 사용할 때 뒤로가기 동작은 어떤가?

기타: javascript의 메모리 관리

Reference

페이지를 이동하는 방법에 따른 캐시

profile
#의식의흐름 #순간순간 #생각의스냅샷

0개의 댓글