브라우저 캐시 테스트

이 페이지 내의 테스트를 위한 모든 파일은 불러온 시간에 etag 를 랜덤 생성하고, last-modified 를 현재시각으로 응답합니다.

요소 캐시 상태

IMS : if-modified-since

ETAG : if-none-match

구형 IE 외의 요즘 브라우저들은 새로고침시 문서 내 요소에 대해 다시 묻지도 않고 캐시를 이용하기 때문에 304 항목은 거의 의미 없습니다.

요소를 직접 열고 새로고침하면 각각 확인 됩니다. css 열기

본 테스트에서는 304 검사는 하지만, 304로 응답 가능한 상황에서 304로 응답하지않고 IMS, ETAG 를 본문에 포함합니다.

요소 시간 304
html 2024-04-13 22:16:28
css
css lazyload
js
js lazyload
주소 직접 이동
크롬 : 문서가 수정되었는지 if-modified-since, if-none-match 요청을 하고 304 가 오면 캐시를 이용합니다.
파이어폭스 : 캐시를 이용합니다.
새로고침
문서가 수정되었는지 if-modified-since, if-none-match 요청을 하고 304 가 오면 캐시를 이용합니다.
문서에 포함된 요소들은 캐시를 이용합니다.
파이어폭스 : js 의 경우만 변경되었는지 요청을 합니다.
IE : 문서 내의 모든 요소에 대해 변경검사 요청을 합니다.
강력 새로고침
if-modified-since 요청 없이 새로 불러오지만, 문서 불러오기가 완료되는 시점에서 다시 캐시를 이용합니다.
requirejs, lazyload 등 여러 경우에 새로고침이 되지 않는 요소가 발생합니다.
캐시 비우기 및 강력 새로고침
문서에 이용되는 요소가 무엇인지 미리 알고 구별하는것이 안되기 때문에 브라우저의 캐시를 전체 삭제합니다.
탭 두개 다른 사이트로 띄워놓고 네트워크 탭을 연 후,
size 란에 (disk cache, memory cache) 라고 표기되는것을 확인하고,
한 탭에서 캐시 비운 후 옆탭에서 새로고침해서 size 란을 확인하면 됩니다.

개발자 도구를 연 후 새로고침 버튼을 우클릭하면 아래와 같은 메뉴가 나옵니다.

위에서 파악한 강력 새로고침으로 안되는 요소는 캐시 비우기까지 해야 새로 받아올 수 있습니다.

f12 후 우클릭