[Cache] 페이지 캐시

페이지 캐시 기능은 웹 브라우저가 웹 페이지를 더 빠르게 로드하기 위해 사용하는 기술입니다. 이 기능은 사용자가 이미 방문한 페이지의 일부 또는 전체를 저장하여, 페이지를 다시 방문할 때 저장된 데이터를 사용해 빠르게 로드합니다. 페이지 캐시에는 여러 종류가 있으며, 가장 중요한 두 가지는 일반 HTTP 캐시와 BFCache(Back-Forward Cache)입니다.

HTTP 캐시

HTTP 캐시는 브라우저가 서버에서 가져온 리소스(예: HTML, CSS, JavaScript, 이미지 등)를 저장하여 동일한 리소스에 대한 반복적인 네트워크 요청을 줄이는 데 사용됩니다. HTTP 캐시는 서버와 클라이언트 간의 데이터 전송을 줄여 페이지 로딩 시간을 개선합니다.

 

HTTP 캐시는 웹 페이지의 리소스를 저장하여 이후의 요청 시 서버에서 다시 다운로드할 필요 없이 캐시된 리소스를 사용합니다.

 

HTTP 캐시는 웹 서버와 브라우저 간의 HTTP 헤더를 통해 제어됩니다. 주요 HTTP 캐시 제어 헤더는 다음과 같습니다:

• Cache-Control: 캐싱 동작을 제어합니다.
• Expires: 리소스의 유효 기간을 지정합니다.
• ETag: 리소스의 버전을 나타내며, 변경 여부를 확인합니다.

동작 방식

1. 리소스 요청: 브라우저가 서버에 리소스를 요청할 때 서버는 리소스와 함께 캐시 지시어(Cache-Control, Expires, ETag 등)를 포함한 응답 헤더를 보냅니다.
2. 리소스 저장: 브라우저는 응답 헤더의 지시어에 따라 리소스를 로컬 캐시에 저장합니다.
3. 재사용: 동일한 리소스를 다시 요청할 때, 브라우저는 캐시에 저장된 리소스를 사용하여 네트워크 요청을 피할 수 있습니다. 만료된 리소스의 경우 서버에 조건부 요청(If-None-Match, If-Modified-Since)을 보내고, 리소스가 변경되지 않은 경우 서버는 304 Not Modified 응답을 보냅니다.

주요 특징

• 리소스 단위: 개별 리소스(HTML, CSS, JS 파일 등)를 캐시합니다.
• 만료 및 유효성 검사: 리소스의 만료 시간과 유효성을 검사하여 최신 상태를 유지합니다.
• 범용성: 모든 HTTP 클라이언트(브라우저, API 클라이언트 등)에서 사용됩니다.

BFCache (Back-Forward Cache)

BFCache는 브라우저의 뒤로 가기(Back) 및 앞으로 가기(Forward) 네비게이션을 위해 전체 페이지 상태를 캐싱하는 메커니즘입니다. BFCache는 페이지의 DOM 상태, JavaScript 상태, 스크롤 위치 및 기타 메모리 데이터 등을 포함하여 페이지 전체를 캐시합니다.

 

BFCache는 사용자가 뒤로 가기 또는 앞으로 가기 버튼을 눌렀을 때 페이지의 전체 상태를 저장하여 페이지를 다시 로드하지 않고 빠르게 복원할 수 있는 캐시입니다. 

 

BFCache는 페이지가 pagehide 이벤트를 통해 캐시되었을 때 발생하며, 페이지가 다시 표시될 때 pageshow 이벤트가 발생합니다.

동작 방식

1. 페이지 탐색: 사용자가 페이지를 탐색할 때 브라우저는 현재 페이지의 상태를 BFCache에 저장합니다.
2. 뒤로/앞으로 탐색: 사용자가 브라우저의 뒤로 또는 앞으로 버튼을 클릭할 때, 브라우저는 BFCache에서 페이지를 복원합니다.
3. 페이지 복원: BFCache에서 복원된 페이지는 페이지 로딩 없이 즉시 표시됩니다. 자바스크립트 상태, 스크롤 위치 등이 그대로 유지됩니다.

주요 특징

• 전체 페이지 단위: 개별 리소스가 아닌 페이지 전체 상태를 캐시합니다.
• 즉시 복원: 뒤로/앞으로 탐색 시 페이지 로딩 없이 즉시 복원됩니다.
• 상태 보존: DOM 상태, 자바스크립트 상태, 스크롤 위치 등을 포함하여 페이지 상태를 그대로 유지합니다.
• 속도 향상: 페이지의 전체 상태를 저장하여 복원 속도가 매우 빠릅니다.
• 제한 사항: BFCache는 특정 조건(예: 특정 자바스크립트 API 사용, 비활성화된 페이지 등)에서만 작동합니다.
   예를 들어, unload 이벤트 리스너가 있는 페이지는 BFCache에 저장되지 않습니다 (Dev) (DevDoc).

차이점 요약

특성HTTP 캐시BFCache

캐시 단위	개별 리소스 (HTML, CSS, JS 등)	전체 페이지 (DOM, 자바스크립트 상태 등)
사용 목적	네트워크 요청 줄이기, 리소스 로딩 속도 개선	뒤로/앞으로 탐색 시 페이지 로딩 속도 개선
만료 및 유효성 검사	리소스 만료 시간 및 조건부 요청	상태 보존 및 즉시 복원
적용 범위	모든 HTTP 클라이언트	웹 브라우저의 뒤로/앞으로 탐색
주요 헤더	Cache-Control, Expires, ETag 등	N/A
상태 보존	없음	페이지 상태 (DOM, 스크롤 위치, 자바스크립트 상태 등)

이 두 가지 캐싱 메커니즘은 웹 애플리케이션의 성능을 향상시키기 위해 서로 다른 방식으로 작동합니다.
HTTP 캐시는 주로 네트워크 요청을 줄이고 리소스 로딩 속도를 개선하는 데 사용되며,
BFCache는 브라우저 탐색 시 페이지를 즉시 복원하여 사용자 경험을 개선하는 데 중점을 둡니다.

페이지 캐시의 이점

1. 로드 시간 단축: 페이지가 캐시에 저장되어 있으면 네트워크 요청이 줄어들어 로드 시간이 단축됩니다.
2. 트래픽 감소: 캐시를 사용하면 서버 요청이 줄어들어 네트워크 트래픽이 감소합니다.
3. 사용자 경험 향상: 빠른 로드 시간은 사용자 경험을 크게 향상시킵니다.

---

연관된 글 :

[개발/개발지식] - 메모리 캐시와 디스크 캐시

 

참고: