HTTP 상태 코드 200 (캐시)과 상태 코드 304의 차이점은 무엇입니까?


201

Firefox 용 Google "Page Speed"플러그인을 사용하여 웹 사이트에 액세스하고 있습니다.

내 페이지의 일부 구성 요소는 HTTP 상태로 표시됩니다.

200200 (캐시) 304

Google의 "페이지 속도"

내가 혼동하는 것은 200 (캐시)과 304의 차이점입니다.

페이지를 여러 번 새로 고쳤지만 캐시를 지우지 않았습니다. 항상 내 favicon.ico 및 일부 이미지는 status = 200 (캐시) 인 반면 다른 이미지는 http 상태 304 인 것 같습니다.

왜 차이가 나는지 모르겠습니다.

업데이트 :

Google "Page Speed"를 사용하여 http://example.com/favicon.icohttp://cdn.example.com/js/ga.js에 대한 "200 (캐시)"을받습니다 .

그러나 http://cdn.example.com/js/combined.min.js에 대한 http 상태 "304"가 표시됩니다 .

동일한 디렉토리 / js /에 두 개의 JavaScript 파일이있는 이유를 이해하지 못합니다. 하나는 http 상태 304를 반환하고 다른 하나는 200 (캐시) 상태 코드를 반환합니다.

답변:


220

코드가 "200 (캐시)"인 항목은 브라우저 캐시에서 직접 이행되었습니다. 즉, 항목에 대한 원래 요청은 브라우저가 해당 항목을 캐시 할 수 있음을 나타내는 헤더 (예 : 미래 날짜 Expires또는 Cache-Control: max-age헤더) 와 함께 반환 됩니다. 새 요청을 트리거 할 때 캐시 된 객체는 여전히 로컬 캐시에 저장되었으며 아직 만료되지 않았습니다.

반면에 304는 파일이 캐시 된 마지막 버전 이후 파일이 수정되었는지 브라우저가 확인한 후 서버의 응답입니다 (답은 "아니오").

웹 성능을 최적화하려면 모든 자산에 대해 미래 Expires:또는 Cache-Control: max-age헤더를 설정 한 다음 자산을 변경해야 할 때 자산의 실제 파일 이름을 변경하거나 해당 자산에 대한 요청에 버전 문자열을 추가하는 것이 가장 좋습니다. 따라서 자산이 캐시의 버전에서 완전히 변경되지 않은 한 (304 응답이 필요하지 않은) 요청을 할 필요가 없습니다. 장기 캐싱의 올바른 사용에 대한 자세한 내용 은 Google에 있습니다 .


2
"200 (캐시)"또는 "304"http 상태 메시지는 속도 관점에서 더 나은 것입니까?
행크

22
200 캐시. 여기에 대한 좋은 참고 사항은 developer.yahoo.com/performance/rules.html#expires 입니다. 자산에서 가능한 한 만료 시간을 원하지만이 방법으로 일정량의 통제력을 상실한다는 사실과 균형을 이루어야합니다. 할 수있는 한 가지는 파일에서 오래 지속되는 설정을 한 다음 필요할 때 해당 파일의 자산 버전 번호를 늘리는 것입니다. 예를 들어 style.css? v1을 포함하고 <link> 요소에서 style.css? v2로 증분 할 수 있습니다.
벤 Regenspan

1
Justice, 왜 Firebug가 ga.js에 대한 로컬 캐시 (상태 = 200 캐시)에서 가져 왔지만 Combine.min.js가 304 http 상태를보고한다고보고합니까? 이상한 점은 두 파일이 모두 같은 파일 형식 (JavaScript)이고 동일한 서버 디렉토리에 있다는 것입니다. 당신은 둘 중 하나 (200) 또는 (304), 그리고 다른 것 생각
행크

8
max-age하고 age있는 경우도 200 (캐시) 결과를 초래할 수 결합 헤더 age미만이다 max-age. 한 가지 예외는 사용자가 브라우저 새로 고침 단추를 클릭하면 304 헤더가 전송되는 것입니다.
yitwail

2
HTML5 Boilerplate은 캐시 버스 팅의 쿼리 문자열 방법을 사용하지 말 것을 권장합니다. href, url,src각 파일에 대한 참조 를 변경하여 '지문'(파일의 해시 또는 간단한 증분 번호)을 포함시키는 것이 좋습니다. 지문을 벗기고 그냥 봉사 style.css하거나 뭐든지 서버에서 그렇게 할 수 없다면, 빌드 시스템이 지문으로 실제 파일의 이름을 바꾸도록하십시오.
iono

62

200 (캐시)은 Firefox가 단순히 로컬로 캐시 된 버전을 사용하고 있음을 의미합니다. 웹 서버에 대한 요청이 없으므로 가장 빠릅니다.

304는 Firefox가 "If-Modified-Since"조건부 요청을 웹 서버로 전송 함을 의미합니다. 브라우저가 보낸 날짜 이후에 파일이 업데이트되지 않은 경우 웹 서버는 304 응답을 반환하여 기본적으로 Firefox에 캐시 된 버전을 사용하도록 지시합니다. 요청이 여전히 웹 서버로 전송되기 때문에 200 (캐시)만큼 빠르지는 않지만 서버는 파일의 내용을 보낼 필요가 없습니다.

마지막 질문으로, 같은 디렉토리에있는 두 개의 JavaScript 파일이 다른 결과를 반환하는 이유를 모르겠습니다.


18

이것은 나에게도 오랫동안 던졌다. 가장 먼저 확인하는 것은 새로 고침 버튼을 클릭하여 페이지를 다시로드하지 않는다는 것입니다.이 버튼은 항상 리소스에 대한 조건부 요청을 발행하고 많은 페이지 요소에 대해 304를 반환합니다. 대신 URL 표시 줄로 이동하여 페이지를 선택하고 동일한 URL을 다시 입력 한 것처럼 enter를 누르면 캐시 된 내용을 더 잘 알 수 있습니다. 이 기사는 조건부 요청과 무조건 부 요청의 차이점과 새로 고침 버튼이 요청에 미치는 영향을 설명하는 데 도움이됩니다. http://blogs.msdn.com/b/ieinternals/archive/2010/07/08/technical-information-about- 조건부 -http- 요청-및 -the-refresh-button.aspx


1
CDN에 대한 304 개의 요청 상태를 파악하는 데 얼마나 많은 시간을 소비 했는지도 설명 할 수 없습니다. 조금 다른 질문에 대답하지만 현상금이 필요합니다 :-)
Peeech

당신이 맞습니다 : 코드의 차이는 당신이 다시로드하거나 같은 페이지가 아니라는 사실과 관련이 있습니다. 페이지를 다시로드하면 브라우저의 네트워크 모니터에 304 코드가 표시됩니다. 그러나 동일한 파일을 사용하는 다른 URL에 액세스하면 브라우저의 네트워크 모니터에서 200 (캐시 코드) 코드가 표시됩니다. 제 경우에는 다른 URL이 원래 URL에 추가 된 쿼리 문자열 일뿐입니다 (페이지는 본질적으로 동일).
aldemarcalazans

8

HTTP 304는 "수정되지 않았습니다". 웹 서버는 기본적으로 브라우저에 "이 파일은 마지막으로 요청한 이후 변경되지 않았습니다"라고 알려줍니다. HTTP 200은 브라우저에 "성공적인 응답이 있습니다"라는 메시지를 보내는 반면 브라우저가 파일에 처음 액세스 할 때 또는 수정 된 사본에 처음 액세스 할 때 리턴되어야합니다.

상태 코드에 대한 자세한 내용은 http://en.wikipedia.org/wiki/List_of_HTTP_status_codes를 확인하십시오 .


그것은 나의 이해이기도합니다 ... 그래서 원래 게시물에서 페이지를 여러 번 새로 고쳤지만 동일한 favicon.ico에 대한 "200 (캐시)"가 계속 표시되고 특정 JavaScript가 포함되어 있다고 말한 이유입니다. 매우 이상하다
행크

2
200은 실제로 캐시 된 것이 아니라 확인을 의미합니다. 서버 구성이 브라우저에 명시 적으로 ico 및 js 파일을 캐시하도록 지시하지 않아 상태 코드 200이 리턴 될 수 있습니다.
richleland

내 JavaScript 중 일부에서는 b / c가 아니며 304를 받고 다른 JavaScript는 "200 (캐시)"을받습니다. 모든 JavaScript는 동일한 웹 서버 디렉토리 example.com/js/ 내에 있습니다
Hank

200 (캐시)은 로컬로 캐시되어 실제로 서버에 요청하지 않는 것을 의미합니다. 이는 서버로 이동하여 304 응답을 얻는 것보다 빠릅니다.
richleland 2009

라이브 사이트와 해당 JavaScript를 보여주기 위해 원본 게시물을 업데이트했습니다. 업데이트 된 원본 게시물을 참조하십시오.
행크

2

마지막 질문에 왜? 내가 아는 것을 설명하려고 노력할 것이다

평신도의 관점에서이 세 가지 상태 코드에 대한 간단한 설명.

  • 200-성공 (브라우저 요청 및 서버에서 파일 가져 오기)

서버에서 캐싱을 사용하는 경우

  • 200 (메모리 캐시에서)-브라우저에서 파일을 찾았으므로 브라우저가 서버에서 요청하지 않습니다.
  • 304-브라우저가 파일을 요청했지만 서버에서 거부

일부 파일의 경우 브라우저가 서버에서 요청하기로 결정하고 일부의 경우 저장된 (캐시 된) 파일에서 읽기를 결정합니다. 왜 이런거야 ? 모든 파일에는 만료 날짜가 있으므로

파일이 만료되지 않은 경우 브라우저는 캐시 (200 캐시)에서 사용합니다.

파일이 만료되면 브라우저는 서버에 파일을 요청합니다. 두 위치 (브라우저 및 서버)의 서버 확인 파일 동일한 파일을 찾으면 서버는 요청을 거부합니다. 프로토콜 브라우저에 따라 기존 파일을 사용합니다.

이 nginx 구성을보십시오

location / {
    add_header Cache-Control must-revalidate;
    expires     60;
    etag on;

    ...
}

여기서 만료는 60 초로 설정되므로 모든 정적 파일은 60 초 동안 캐시됩니다. 따라서 60 초 이내에 파일을 다시 요청하면 브라우저는 메모리 (200 메모리)에서 읽습니다. 60 초 후에 요청하면 브라우저는 서버 (304)를 요청합니다.

나는 60 초 후에 파일이 변경되지 않았다고 가정했는데,이 경우 200이됩니다 (즉, 업데이트 된 파일이 서버에서 가져옵니다).

따라서 서버가 다른 만료 및 캐싱 헤더 (정책)로 구성된 경우 상태가 다를 수 있습니다.

cdn을 사용하는 경우 cdn의 주요 목적은 고 가용성 및 빠른 전달입니다. 따라서 여러 서버를 사용합니다. 파일이 동일한 디렉토리에있는 것처럼 보이지만 cdn은 여러 서버가 다른 구성을 가진 경우 u 컨텐츠를 제공하기 위해 여러 서버를 사용할 수 있습니다. 그러면 이러한 상태가 변경 될 수 있습니다. 도움이 되길 바랍니다.


304-수정되지 않음은 서버에 의한 "거부"가 아닙니다. "클라이언트에게 요청한 버전의 경우 수정되지 않았으므로 파일이 실제로 필요하지 않습니다"라고 선언하는 서버입니다. 기술적으로 304는 "리디렉션"응답 코드 중 하나입니다. 클라이언트에게 "자신의 캐시에서 가져옵니다"라고 말합니다.
Bob Kuhar
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.