브라우저 캐시

개발자 도구 네트워크탭을 애용하는 개발자는 리프레시 한 뒤 일부 리소스가 [디스크 캐시] 되는 것을 발견했을 것이다. 필자는 어렴풋이 캐싱되어서 컨텐츠 로드가 더 빨라지겠거니 추측했지만, 오늘은 궁금증을 갖고 면밀하게 조사해보려고 한다.

 

그래서 오늘 풀어볼 궁금증은?

• 브라우저 캐시는 어디에 저장되는 것일까? 
• 메모리 캐시와 디스크 캐시의 차이점은 무엇일까? (왜 메모리 캐시는 0ms, 디스크 캐시는 시간이 소요될까?)
• 캐시 처리 단계는?
• React 에서는 Caching 정책을 어떻게 설정하고 최적화 할 수 있을까? 그 전에 각 리소스에 어떻게 캐시 정책을 적용하지?
• 간혹 PHP 배포 후 이전 리소스를 불러와서 에러가 난 적이 있는데, 이를 어떻게 피할 수 있을까?

---

 

[chrome for developers Lighthouse 섹션] 에서

HTTP 캐싱을 사용하면 재방문 시 페이지 로드 시간이 줄어들 수 있습니다.
브라우저가 리소스를 요청하면 리소스를 제공하는 서버는 브라우저에 리소스를 일시적으로 저장하거나 캐시할 기간을 알려줄 수 있습니다. 이후에 해당 리소스를 요청할 때 브라우저는 네트워크에서 가져오는 대신 로컬 사본을 사용합니다.

 

이때 HTTP 리소스란, HTTP 요청으로 가져올 수 있는 모든 종류의 파일 (HTML, CSS, JS, 이미지, 폰트 등)을 일컫습니다. (즉, fetch 요청 제외) 그리고 Cache-Control, Expires 응답 헤더를 통해 캐싱 기간을 알려줍니다.

 

이때 로컬 사본은 아래와 같이 유저 컴퓨터 내에 저장되는 것으로 보이는데, 메모리 캐시와 디스크 캐시의 차이점이 모호해서 더 조사해봐야한다. (대부분 HW 관점에서 설명하고, 그래서 어디에 저장되는데? 를 알고 싶어도 이를 끝까지 설명한 곳이 없었다)

[진입 방법] Finder 창에서  Shift + Command(⌘) + G(알파벳)

 

 

 

그리고 캐싱 정책은 다음과 같이 여러가지가 있을 수 있다.

 

• 매번 새롭게 가져오기
• 변경사항 확인 후 없다면, 기존 사본 유지하기 (이때, 매번 새롭게 가져오기의 경우 본문 자체를 가져오기 때문에 응답 헤더만으로 체크하는 서버 재검사 과정 비용이 더 절약된다)
• 만료되어 새로운 사본으로 갱신하기

이와 관련해서 여러 header, option 들이 있는데, 이건 실습을 해봐야 이해가 될 것 같다. 

 

 

 

 

참고 자료

• https://web.dev/articles/http-cache?hl=ko
• https://toss.tech/article/smart-web-service-cache
• https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl?hl=ko
• https://kimby.tistory.com/119 - React 성능 최적화 (Cache Busting)
• https://developer.mozilla.org/ko/docs/Web/HTTP/Caching