브라우저 캐시

• 캐시의 개념
• 브라우저 캐시
• memory cache • disk cache

캐시의 개념

• 캐시는 데이터를 미리 복사해 놓는 임시 장소다.
• 데이터 접근 시간이 오래 걸리거나 값을 다시 연산하는 시간을 단축하기 위해 사용한다.
• 데이터가 본래 저장된 장소보다 접근 시간이 더 빠른 별도의 장소에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있다.

브라우저 캐시

브라우저는 웹 페이지에서 사용되는 다음 자원들을 캐시에 저장한다:

• 이미지
• 스크립트
• 스타일시트
• 폰트
• 기타 웹 자원

캐시를 통해 얻는 이점:

• 동일한 자원을 다시 다운로드하지 않고 재사용 가능
• 렌더링 속도 향상
• 대역폭 사용량 감소

캐시된 데이터는 웹 서버에서 지정한 만료 기간 또는 캐시 제어 헤더(Cache-Control, Expires, ETag 등)를 기반으로 관리된다. 만료 기간이 지나거나 유효성 검사에 실패하면 브라우저는 데이터를 새로 다운로드한다.

memory cache • disk cache

브라우저에서는 자원을 캐싱할 때 저장 위치에 따라 memory cache와 disk cache로 나뉜다. 브라우저가 어떤 자원을 어디에 저장할지는 브라우저의 자체적인 알고리즘(사용 빈도, 자원의 크기, 가용 메모리 등)에 의해 결정된다.

• memory cache

  • 컴퓨터의 RAM(메모리)에 저장
  • 브라우저(또는 탭) 종료 시 데이터가 휘발됨
  • 주로 폰트, 이미지 등 렌더링에 즉시 필요한 자원들이 저장됨
  • 디스크보다 메모리의 I/O 속도가 월등히 빠르기 때문에 가장 빠른 접근 가능 (0ms에 가까움)

• disk cache

  • 컴퓨터의 하드디스크(또는 SSD)에 저장
  • 브라우저가 종료되어도 데이터가 유지됨 (영구적 저장소)
  • 주로 스크립트, 스타일시트 등 크기가 크거나 메모리에 상주시키기 부담스러운 자원들이 저장됨
  • 메모리 캐시보다는 느리지만 네트워크 요청보다는 훨씬 빠름

개발자 도구의 Network 탭 Time 열에서 memory cache, disk cache, 그리고 캐시되지 않은 자원(네트워크 요청)의 속도 차이를 명확하게 확인할 수 있다.