문득 로컬에서 기능을 개발하고 테스트하던 중에 눈에 띈 부분이 있었다.

바로 상태 코드 내용 중 메모리 캐시와 디스크 캐시였다.

유저의 프로필 부분의 dropdown menu를 보여주기 위한 UI인 svg와 해당 dropdown을 클릭했을 때 버튼의 내용으로 포함될 svg들을 각각의 다른 캐시에서 불러오고 있었다.

브라우저가 이러한 데이터를 처리하는 캐싱과정을 알아보자.

브라우저 캐싱

우리가 사용하는 웹 브라우저는 웹 사이트의 로딩 속도와 UX(사용자 경험)을 위해 자주 사용되는 데이터를 저장하기 위해 로컬에 캐싱한다.

주로 두가지의 방식으로 저장되는데 위 사진에서 본 메모리 캐시와 디스크 캐시이다. 이 두가지의 캐싱 방식의 차이점은 저장 위치와 접근 속도에 있다.

메모리 캐싱

메모리 캐싱은 리소스를 말그대로 메모리에 저장한다. 여기서 말하는 메모리는 RAM이다. RAM에 저장하는만큼 데이터에 아주 빠르게 접근이 가능하다.

반면, RAM의 용량은 제한적이기 때문에 메모리 캐시는 상대적으로 작은 크기의 데이터나 자주 사용되는 데이터를 저장하는 데 적합하다. 또한, 메모리에 캐싱되는 데이터는 휘발성이여서 브라우저가 닫히면 캐싱된 데이터는 휘발된다.

디스크 캐싱

디스크 캐싱은 데이터를 디스크에 캐싱한다. 메모리 캐싱과 다르게 비휘발성이기 때문에 브라우저가 닫혀도 데이터가 휘발되지 않는다.

추가로 새롭게 알게된 사실은 한번 메모리 캐싱이 된 이후 브라우저가 닫히거나 메모리의 캐싱이 휘발되면 이후 디스크에서 캐싱을 처리한다.