이미지에 브라우저 캐싱을 효과적으로 사용하는 방법은 무엇입니까?

다음을 달성 할 수있는 HTTP 헤더 조합은 무엇입니까?이미지에 브라우저 캐싱을 효과적으로 사용하는 방법은 무엇입니까?

가능한 한 오랫동안 이미지와 같은 정적 컨텐츠를 캐시하고 싶지만, 서버에서 이미지가 변경되면 브라우저에서 업데이트해야합니다.

2011-09-01 chobo

항상 같음 : 최대 * 캐시 기간을 원하는대로 조합하고 서버가 내용을 수정하지 않고 반환하도록 보장. 똑똑한 서버는 [ETags] (http://en.wikipedia.org/wiki/HTTP_ETag)를 사용하여 마지막으로 수정 한 날짜 이후의 내용을보다 잘 제어 할 수 있습니다. –

정적 컨텐츠의 매우 정교한 캐싱 접근법은 정적 컨텐츠의 버전을 URL 내에 인코딩하는 것입니다. 그런 다음 브라우저에 새로운 정적 컨텐츠를 다운로드하라는 통지는 클라이언트에 새 URL을 제공하는 것입니다.


# first version access (1.1/main.css will never expire) 
# e.g. by far future Cache-Control + Expires Header 
<link ... href="/static/1.1/main.css 

# after upgrading/releasing trigger fresh download 
<link ... href="/static/1.2/main.css

빌드 + 배포 프로세스에는 약간의 노력이 필요하지만 캐싱 제어에서는 매우 간단합니다.

출처

2011-09-01 19:05:59

실제로 이것은 종종 유일한 실행 가능한 솔루션입니다. – EricLaw

yeat 만료와 함께 만료 또는 cahce 제어 헤더가있는 경우 브라우저에 항목이 업데이트되었는지 확인하도록 지시 할 방법이 없습니까? – chobo

기본적으로 2 캐시 스타일 : 1) 조건부 GET (브라우저가 ETag 또는 If-Modified-Since 등 새 콘텐츠를 확인하기 위해 호출을 명시 적으로 수행 중이므로 304 개의 수정되지 않은 콘텐츠 또는 200 개의 확인 된 콘텐츠가 업데이트 됨). 2) 브라우저에게 전화를 전혀하지 말라는 명령 (예 : Cache-Control : max-age, Expires header). 2)는 트래픽을 전혀 발생시키지 않지만 업데이트 강제력을 사용할 수 없다는 단점이 있습니다. 따라서 (URL로 식별 된) 콘텐츠가 업데이트되지 않을 것이라고 확신하는 경우에만 스타일 2)를 사용합니다 (내 초기 답변 참조). –

이미지에 브라우저 캐싱을 효과적으로 사용하는 방법은 무엇입니까?

답변

관련 문제