[프론트엔드] 브라우저 메모리 캐시, 디스크 캐시

메모리 캐시랑 디스크 캐시는 브라우저가 리소스를 저장하는 방식을 나타낸다.

 

메모리 캐시란?

- 말 그대로 메모리, 즉 RAM에 저장돼서 빠른 속도가 특징이다.

- RAM 메모리까지 가지 않고 CPU에 작은칩 안에 빠른 메모리 L1, L2, L3에서 데이터를 가져와 디스크 캐시 보다 더 빠르게 데이터를 가져 온다.

- 현재 열린 탭에서 CSS나 JS 같은 리소스를 바로 가져올 때 유용합니다. 하지만 브라우저 창을 닫거나 새로고침하면 해당 리소스들이 사라지게 된다.

 

디스크 캐시란?

- 하드디스크나 SSD 같은 저장장치에 저장돼서, 브라우저를 껐다 켜도 남아 있는 것이 특징이다.

- 하드디스크에 접근하는 시간을 개선하고자 RAM에 저장하는 기법이며 하드디스크에 접근해서 데이터를 가져오는 것보다 RAM에 접근에서 데이터를 가져오는 것이 더 빠르다.

- 자주 방문하는 사이트의 이미지나 폰트 같은 리소스를 다시 다운받지 않고 사용할 수 있는 장점이 있습니다.

 

다만, 디스크는 메모리보다 접근 속도가 느려서 로딩 속도에 차이가 있을 수 있다.
브라우저는 일반적으로 페이지에서 빠르게 다시 쓸 가능성이 높은 건 메모리에 저장하고, 오래 유지해야 하는 건 디스크에 저장한다.

현재 페이지에서 사용되는 JS나 CSS 파일은 메모리 캐시에 두고, 이미지나 웹 폰트와 같은 리소스는 디스크 캐시에 저장해서 나중에도 재사용할 수 있도록 할 수 있다.

캐시와 관련된 정책과 그에 따른 동작은 브라우저마다 다를 수 있다는 점에 유의해야 한다.