1. 브라우저 캐시란?

브라우저 캐시는 브라우저에서 로컬 웹 페이지 리소스를 저장하는 데 사용되는 메커니즘이다. 이로 인해 성능이 향상되고 대역폭 소비가 최소화되어 개선된 환경이 만들어진다.

캐시는 빠른 억세스를 위해 값을 임시로 저장하는 데 사용되는 방식이다 . 브라우저 캐시는 CSS, JS, 이미지, 비디오 등의 정적 리소스를 포함하는 작은 데이터베이스이다.

2. 방식

• 브라우저가 웹 서버의 일부 컨텐츠를 요청한다.
• 컨텐츠가 브라우저 캐시에 없으면 웹 서버에서 직접 검색한다. 컨텐츠가 이전에 캐시 되었다면 브라우저는 서버를 우회하여 캐시에서 직접 콘텐츠를 로드한다.

캐시된 컨텐츠가 만료되었는지 여부에 따라 컨텐츠가 Stale인 것으로 간주된다. 반면, Fresh는 콘텐츠가 만료 날짜를 지나지 않았으며 서버가 아닌브라우저 캐시에서 직접 제공될 수 있음을 의미한다.

유효성 검사는 서버가 보유하고있는 최신 버전과 비교하여 검사해야하는 컨텐츠를 말한다 즉, 내용이 stale인지 여부를 판단한다. 유효 기간이 만료되기 전에 캐시에서 내용을 제거하면 유효성이 확인되지 않는다. 이는 내용이 변경된 경우 서버에서 강제 될 수 있으며 문제가 발생하지 않도록 브라우저에 최신 버전이 있어야 한다.

브라우저 캐싱은 특정 HTTP 헤더를 사용하여 웹 개발자와 관리자가 활용할 수 있다. 이 헤더는 자원을 언제 캐시할지, 얼마나 오래 캐시할지 웹 브라우저에 지시한다. HTTP 캐시 관련 헤더를 사용하는 것은 종종 불만족스러운 경우가 있는데 HTTP 프로토콜의 다양한 환생을 통해 헤더와 상당히 겹치기 때문이다. 사이에 있는 이상한 웹 프록시, 오래된 브라우저, 충돌하는 캐싱 정책 및 구현(예 : 다른 WordPress 플러그인)과 같은 것들이 복합되면 더욱 머리가 아플 것이다.

3. Cache-control

Cache-control 헤더는 HTTP/1.1에 도입되었다. 브라우저의 작동 방식에 따라 사용 가능한 여러 필드가 있다.

• No-cache

웹 브라우저가 즉시 캐시를 참조하지 않고 서버에 대해 컨텐츠의 유효성을 검사하도록 지시한다. Fresh의 경우 캐시에서 제공한다.

• No-store

브라우저가 컨텐츠를 캐시하지 않도록 지시합니다. 민감한 데이터나 자주 변경되는 데이터를 다룰 때 주로 사용된다.

• Public

칸텐츠를 공개로 표시한다. 즉, 브라우저 및 프록시 등의 중개자가 캐시 할 수 있음을 의미한다.

• Private

컨텐츠를 표시하는데 사용되며 중간 프록시 등이 아닌 브라우저에서만 캐시 할 수 있다. 일반적으로 사용자 관련 데이터를 나타낸다.

• Max-age

Max-age는 클라이언트가 클라이언트 유효성을 다시 확인해야 브라우저 캐시에 콘텐츠를 남겨 둘 수있는 최대 시간(초)을 나타낸다. Expires 헤더와 달리, max-age는 콘텐츠가 캐시된 시간의 상대 값을 초 단위로 정의한다. 절대 만료 날짜가 아니다.

• S-maxage

max-age와 비슷하지만 중간 캐시에만 사용된다.

• Must-revalidate

브라우저 캐시에서 직접 제공하는 대신 브라우저가 필요할 때마다 콘텐츠의 유효성을 다시 확인하도록 한다. 네트워크 중단이 발생했을 때 유용하다.

• Proxy-revalidate

Must-revalidate 와 유사하지만 중간 캐시에만 적용된다.

• no-transform

브라우저에 어떤식으로든 (일반적으로 압축 등) 서버로부터 받은 컨텐츠를 변형시키지 않도록 지시한다.