HTTP2 헤더 캐시와 조건부 요청
예를 들어 웹 브라우저에서 star.jpg를 요청한다고 가정해보자 그럼 서버에서 보고 star.jpg가있으면 응답을 내려줄것이다.
그럼 응답http를 보면 헤더가 있고 그밑에 이미지와 관련된 바이트 코드들이 있을것이다.
HTTP헤더에 관련된 용량이 0.1M 실제 이미지를 표현하는 HTTP바디는 1.0M 그럼 1.1M 의 네트워크를 차지하면서 이미지를 내려줄것이다.
그럼 이렇게 웹브라우저 화면에 나타날것이다.
그리고 캐시가 없는 상황에서 똑같은 요청을 한번 더한다면??
그럼 서버에서는 똑같이 응답을 내려줄텐데 똑같이 같은 1.1M가의 용량의 이미지를 내려줄것이다. 이럴때 문제는 무엇일까? 똑같은 이미지 똑같은 데이터를 내려주게되면
즉 캐시가 없을때는 아래와 같다.
캐시가 없을 때
- 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다.
[ 인터넷 네트워크는 상대적으로 PC의 메모리나 하드디스크에 비해 매우 느리고 매우 비싸다 ] - 인터넷 네트워크는 매우 느리고 비싸다. [ 사용자는 느린 인터넷속도를 경함한다 ]
- 브라우저 로딩 속도가 느리다.
- 느린 사용자 경험
자 그럼 캐시를 적용하면??
우선 웹브라우저에서 star.jpg 라고 서버에서 캐시와 관련된것을 세팅을 해야한다.
그럼 서버에서 캐시를 적용하면 cache-control이라고 헤더에 이것을 넣어줄수 있는데
이것은 캐시가 유효한 시간을 의미한다. 즉 위 예제에서 max-age가 60인데 이것은 60초를 의미하고 60초동안은 이 캐시가 유효하다는 의미이다.
그러면 최초에 요청을 할때는 똑같이 star.jpg가 1.1M의 데이터가 내려간다.
그럼 웹브라우저에는 내부의 캐시를 저장하는 저장소가 있는데 거기에 60초 유효하다고 적어두고 응답결과를 캐시에 저장한다.
그럼 두번째 요청할때는 우선 캐시를 먼저 서칭한다.
거기에 캐시의 유효시간을 보고 아직 기간이 있다면 그럼 그냥 캐시에서 그 이미지를 바로 가져온다 그럼 네트워크를 타지 않아도 된다! 즉 캐시를 적용하면 아래와 같다!
캐시 적용
- 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.
- 비싼 네트워크 사용량을 줄일 수 있다.
- 브라우저 로딩 속도가 매우 빠르다.
- 빠른 사용자 경험
만약 캐시의 유효시간이 초과되면??
서버에서 정한 유효시간이 초과되면 당연히 다시 요청을 해야한다.
그럼 다시 요청을 하면 또 똑같이 메시지를 내려준다 .
그럼 기존 받은 데이터를 지우고 캐시를 덮어씌워서 초기화를 시키고 유효시간이 있는 캐시값이 다시 저장된다.
캐시 시간 초과
- 캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신한다.
- 이때 다시 네트워크 다운로드가 발생한다.
근데 똑같은 이미지 똑같은 데이터를 다시 전체 내려받는건 너무 아까운 행동이다.
만약 클라이언트 캐시가 만료가 되었는데 클라이언트가 가진 데이터와 서버가 가진 데이터가 똑같은데 굳이 다시 다운로드 받을 필요가 있을까??
이부분에 대해 새로운 글로 정리해야겠다.
