Diiiiiikey

Blog

캐시 사용하기

데이터에 접근 시간이 길 때, 값을 다시 계산하는 시간 절약할 때

  • 캐시가 유효한 시간 동안 네트워크 리소스를 아낄 수 있음
  • 브라우저 로딩이 빨라짐
  • 빠른 사용자 경험 제공 가능

캐시 검증 헤더와 조건부 요청

캐시 유효 시간은 지났지만, 동일한 파일을 다운받아야 할 때, 서버의 파일과 캐시의 파일이 동일한지 확인해서 재사용

캐시 검증 헤더, 조건부 요청 헤더

  • 캐시 검증 헤더

캐시에 저장된 데이터와 서버의 데이터가 동일한지 확인하기 위한 정보를 담은 응답 헤더

  • Last-Modified - 데이터가 마지막으로 수정된 시점을 의미하는 응답 헤더, 조건부 요청 헤더인 If-Modified-Since 와 묶어서 사용

  • Etag - 데이터의 버전을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-None-Match 와 묶어서 사용

  • 조건부 요청 헤더

캐시의 데이터와 서버의 데이터가 동일하다면 재사용하게 해달라는 의미의 요청 헤더

  • If-Modified-Since - 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인, 수정되지 않았다면 캐시된 리소스 사용
  • If-None-Match - 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인, 같으면 캐시된 리소스를 사용

Last-Modified & If-Modified-Since

  • 첫번째 응답에 캐시 유효 시간이 60초인 이미지 파일을 받음. Last-Modified 헤더에 담긴 내용(마지막 수정 시간)도 캐시에 저장
첫번째 요청


  • 60초 초과 후 두번째 요청, 재사용 가능 여부를 확인하기 위해 If-Modified-Since(수정이 없었다면 재사용 가능?)를 작성, Last-Modified 값을 담아 요청을 보냄, 서버 데이터의 최종 수정일과 캐시에 저장된 데이터의 수정일 비교
두번째 요청


  • 동일한 데이터라면(수정일이 같다면) 304 Not Modified(데이터가 수정되지 않았음)라는 응답을 보내고, 캐시 데이터 유효 시간 갱신, 재사용 가능
두번째 요청2


Etag & If-None-Match

  • 첫번째 응답에 캐시 유효 시간이 60초인 이미지 파일을 받음. Etag(서버의 파일 버전) 헤더에 담긴 내용도 캐시에 저장
첫번째 요청


  • 60초 초과 후 두 번째 요청, 요청 헤더 If-None-Match(캐시에 저장한 데이터 버전과 서버 데이터 버전 일치함?, 일치하면 재사용 가능?) 를 작성, 캐시에 함께 저장해놓았던 Etag 값을 담아 요청. 이 값로 서버 데이터의 Etag 와 캐시에 저장된 데이터의 Etag 비교.
두번째 요청


  • 동일한 데이터임이 검증되었다면(Etag값이 같다면) 서버는 304 Not Modified(데이터가 수정되지 않았음) 라는 응답을 보냄, 캐시 데이터 유효 시간 갱신, 해당 데이터를 재사용 가능
두번째 요청2


보통 두 종류를 동시에 사용, 둘 중 하나만 사용했다가 응답 헤더가 없는 경우 재사용이 가능하지만 리소스를 다시 받는 경우가 생길 수 있음

댓글남기기

참고