브라우저 캐싱(HTTP 캐싱, 웹 캐싱)

1. 캐시란?

캐시(cache, 문화어: 캐쉬, 고속완충기, 고속완충기억기)는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있다. 

2. 브라우저 캐싱이란?

브라우저 캐시는 웹 캐시의 일종이다. 

웹 캐시(영어: web cache) 또는 HTTP 캐시(HTTP cache)는 서버 지연을 줄이기 위해 웹 페이지, 이미지, 기타 유형의 웹 멀티미디어 등의 웹 문서들을 임시 저장하기 위한 정보기술이다. 웹 캐시 시스템은 이를 통과하는 문서들의 사본을 저장하며 이후 요청들은 특정 조건을 충족하는 경우 캐시화가 가능하다. 웹 캐시 시스템은 일종의 어플라이언스나 컴퓨터 프로그램을 의미할 수 있다. 동일한 서버에 다시 접근할 때에는 근처에 있는 프록시 서버의 웹 캐시에 저장된 정보를 불러오므로 더 빠른 열람이 가능하다.

 

웹 캐시의 종류

1. Browser Caches

- 브라우저 또는 HTTP요청을 하는 Client Application에 의해 내부 디스크에 캐쉬

- Cache된 Resource를 공유하지 않는 한 개인에 한정된 Cache

- 브라우저의 Back버튼 또는 이미 방문한 페이지를 재 방문하는 경우 극대화

 

2. Proxy Caches

- Browser Cache와 동일한 원리로 동작하며 Client나 Server가아닌 네트워크 상에서 동작.

- 큰회사나 IPS의 방화벽에 설치 되며 대기시간 & 트래픽 감소, 접근정책 & 제한 우회, 사용률 기록등 수행

- 한정된 수의 클라이언트을 위하여 무한대의 웹서버의 컨텐츠를 캐쉬

  

3. Gateway Caches (REVERSE OR SURROGATE PROXY)

- 서버 앞 단에 설치되어 요청에 대한 캐쉬 및 효율적인 분배를 통해 가용성, 신뢰성, 성능등을 향상

- Encryption / SSL acceleration, Load balancing, Serve/cache static content, Compression등을 수행

- 무한대의 클라이언트들에게 한정된 수(또는 하나)의 웹서버 컨텐츠를 제공

 

3. 캐싱되는 정보 

웹페이지에 방문할 때마다 변하지 않는 정적 자산(static asset)을 저장한다. 

• 이미지: 로고, 사진, 백그라운드 등
• HTML
• CSS
• Javascript

4. 장점과 단점 

 

주소 창에 google.com을 검색하면? (브라우저가 웹 페이지를 표시하는 일련의 과정)

장점: 브라우징 속도를 향상시킨다.

사용자가 어떤 페이지를 확인하려 할 때, 브라우저는 URL에 맞는 IP를 찾고 HTTP요청을 보내 렌더링에 필요한 웹페이지 요소 파일들을 서버로부터 GET 한다. 처음 HTML 파일을 받아오고 그 형태에 맞춰 스켈레톤을 그리면, 이후에 필요한 것은 이미지, CSS 등의 정적 자산이다. 이런 프로세스의 속도는 모두 대역폭(bandwidth)에 달려있다. 파일의 사이즈가 작은 텍스트의 경우 다운로드에 시간이 많이 걸리지 않겠지만, 고화질 이미지의 경우 다운로드에 많은 시간을 소모하고 결과적으로 느린 렌더링, 답답한 사용자 경험을 불러일으킨다. 또한 동일 사이트 내에서 페이지 전환 시마다 이전 페이지에도 있었던 정적 자산(예를 들어, 로고 이미지, 푸터 배너 등)을 다시 다운로드 해야 한다면 불필요한 속도 저하를 야기할 수 있다.  

만약 브라우저 캐싱을 통해 정적 자산을 사용자의 하드디스크에 저장한다면, 서버에 접속해 파일을 다운로드 하는 것보다 훨씬 더 빠르게 페이지를 렌더링할 수 있다. 

 

단점: 업데이트된 파일을 만료되지 않은 캐시 때문에 새로 받아오지 않아 문제가 발생할 수 있음. 

캐시의 만료기간은 웹사이트에 의해 결정된다. 이는 내가 받아온 파일이 며칠, 길게는 1년 넘게 캐시될 수 있다는 뜻이다. 악의적인 웹개발자와 웹사이트에 의해 사용자의 디바이스에 악의적인 파일을 저장하는 보안이슈를 고려하지 않는다고 해도, 만료기한이 불필요하게 길다면 문제가 발생할 수 있다. 

예를 들어, 웹사이트의 포맷이나 작동방식에 대한 업데이트가 발생했지만, 특정 사용자의 브라우저가 이를 인식하지 못해서 캐싱된 데이터로 렌더링을 시도할 때 문제가 발생할 수 있다. 대부분의 경우 브라우저가 어떤 자산이 업데이트 되었고 새로 캐시가 필요한 지를 체크하기 때문에 자주 발생하지 않지만, 만약 발생할 경우 웹사이트의 포맷이 달라지고 이미지가 깨지거나 JS가 오작동할 수 있다. 이 경우 사용자가 해당 웹사이트에 대한 브라우저의 캐시를 모두 삭제한다면 최신 파일을 서버로부터 다시 받아오기 때문에 해결할 수 있다. 

 

 

참고

[워드프레스 최적화] 브라우저 캐싱(Browser Caching) 설정으로 빠른 속도와 트래픽 절감이란 두마리

 

yngmanie

웹 캐시 - 위키백과, 우리 모두의 백과사전

 

[간략] 브라우저 캐시에 대해

 

웹 캐시(WEB Cache)란 무엇인가?(특징)