bfcache를 사용하면, 브라우저 속도 최적화를 할 수 있다 ! 👻

웹 페이지에서 링크를 클릭하거나 브라우저의 '뒤로' 버튼을 누를 때, 페이지가 빠르게 로드되는 것을 경험한 적이 있으신가요?

 

뒤로가기, 앞으로가기 성능의 최적화를 위해서 브라우저가 제공하는 캐싱 기능이 있는데, 이것이 바로 BFCache이다!

 

이번엔 BFCache가 무엇인지 알아보고, 어떻게 활용할 수 있는지에 대해서 스터디를 진행했다. 👍

 

---

✨ BFCache(Back-Forward Cache)란?

BFCache(Back-Forward Cache)는 사용자가 브라우저의 '앞으로', '뒤로' 버튼을 눌렀을 때 페이지 로딩 시간을 단축해주는 브라우저의 캐시 기능이다.

 

일반적으로 페이지를 새로 로드하면 서버와 데이터를 다시 주고받아야 하지만, BFCache를 사용하면 기존에 로드된 페이지가 메모리에 저장되어 있어 더 빠르게 다시 로드할 수 있다.

 

bfcache를 사용하면, 사용자 경험(UX)을 크게 개선할 수 있다.

+ bfcache는 브라우저 메모리에 저장된다

 

✨ BFCache의 동작 원리?

BFCache는 페이지 상태를 메모리에 보관하여 사용자가 뒤로 가기나 앞으로 가기를 할 때 페이지를 "재활용"할 수 있도록 도와준다.

즉, 서버 요청을 다시 보내지 않고도 브라우저가 페이지를 기억해 빠르게 다시 로드할 수 있다.

 

특히 다음과 같은 경우에 BFCache가 활성화된다

• 히스토리 탐색
       사용자가 히스토리를 탐색하며 '뒤로' 또는 '앞으로' 버튼을 눌렀을 때
• 동일한 세션
       사용자가 브라우저 창을 닫지 않고 같은 세션에서 페이지를 탐색할 때

❗하지만 주의할 점 역시 존재하는데,

모든 페이지가 BFCache에 자동으로 저장되는 것은 아니며, 특정 조건을 만족해야 한다.

예를 들어, 페이지에 BFCache와 호환되지 않는 JavaScript 이벤트가 있는 경우 BFCache 사용이 제한될 수 있다.

 

그리고 사용자의 당연하게도, 브라우저가 bfcache를 호환하는지 확인해야 한다....

 

요약 🎶 >> BFCache의 장점

• 더 빠른 로딩 시간
       기존의 캐시보다 더욱 빠른 로딩이 가능하여 사용자 만족도를 높인다
• 리소스 절약
       서버 요청을 줄여 리소스를 절약할 수 있다
• 향상된 UX
       빠른 페이지 이동을 통해 사용자의 끊김 없는 경험을 제공한다

 

진짜 마지막으로, 예제코드를 하나 남겨보려고 한다.

 

BFCache는 자동으로 브라우저가 관리하지만, 우리가 특정 이벤트나 상태를 관리하려면 `pageshow`와 `pagehide` 이벤트를 잘 사용해야 한다.

 

BFCache 활용 예제 코드 🥝

아래 코드는 BFCache에 저장된 페이지가 재로드될 때(예: 뒤로 가기 시) 발생할 수 있는 상태 초기화 문제를 해결하는 예제이다.

// 페이지가 표시될 때마다 실행되는 이벤트
window.addEventListener('pageshow', (event) => {
    if (event.persisted) {  // BFCache에서 로드된 경우
        console.log("BFCache를 통해 페이지가 다시 로드되었습니다!");
        // 필요한 경우 초기화할 코드 작성
        // 예: 폼 초기화, 애니메이션 재시작 등
        resetForm();
    }
});

// 페이지가 숨겨질 때 발생하는 이벤트
window.addEventListener('pagehide', (event) => {
    if (event.persisted) {  // 페이지가 BFCache에 저장됨
        console.log("페이지가 BFCache에 저장되었습니다!");
    }
});

// 페이지 내 폼을 초기화하는 함수 예제
function resetForm() {
    const form = document.querySelector('form');
    if (form) {
        form.reset();
        console.log("폼이 초기화되었습니다.");
    }
}

 

•  `pageshow` 이벤트는 페이지가 표시될 때마다 발생하며, `event.persisted`가 `true`이면 BFCache에서 로드된 것이다.
• `pagehide` 이벤트는 페이지가 숨겨질 때 발생하며, 이때도 `event.persisted`가 `true`이면 페이지가 BFCache에 저장된다.
• 이 예제에서는 `resetForm()` 함수를 사용해 BFCache로 로드될 때마다 폼을 초기화하는 작업을 한다.
  
  

위의 코드를 브라우저 콘솔창에 붙여넣고 실행한 뒤, 뒤로가기 앞으로가기를 해보면 다음과 같이 콘솔이 찍히는 것을 확인할 수 있다.

 

 

+ BFCache를 효과적으로 사용하려면 `unload` 이벤트는 피하고, `pagehide`와 `pageshow` 이벤트를 활용해 상태 관리를 해야 한다. 

+ `unload` 이벤트를 사용하면 BFCache가 비활성화될 수 있으므로 주의가 필요하다. ❗

 

 

참고 자료 👻

https://web.dev/articles/bfcache?hl=ko

뒤로-앞으로 캐시  |  Articles  |  web.dev