고성능 웹 사이트 구축 비법 (3) - 브라우저 캐시

브라우저 캐시란 무엇입니까?


에서 우리는 서로 다른 사용자가 같은 데이터를 요청할 때 동적 내용 캐시는 서버의 중복 계산을 피하고 사용자의 대기 시간을 낮출 수 있다는 것을 안다.그러나 동일한 사용자가 동일한 데이터를 요청할 경우 서버가 중복 계산을 피할 수 있어도 브라우저에 중복 데이터를 전달해야 합니다.브라우저 캐시를 사용하면 같은 사용자가 같은 데이터를 요청할 때 브라우저는 자신의 로컬에서 읽기만 하면 서버에서 가져올 필요가 없습니다.이로써 사용자의 대기 시간을 크게 낮추고 서버의 압력을 감소시켜 일거양득이라고 할 수 있다!

브라우저는 캐시를 어떻게 처리합니까?


브라우저 캐시 설정 여부는 HTTP 프로토콜을 통해 제어됩니다.브라우저는 서버에서 전송된 페이지를 받은 후 로컬 캐시에 페이지를 저장합니다.응답 헤더에 페이지의 만료 시간이 포함되어 있으면 사용자가 같은 페이지를 요청할 때 브라우저는 서버에 캐시 페이지를 사용할 수 있는지 묻고 서버가 캐시 사용에 동의하면 304 상태 코드를 되돌려줍니다.서버가 동의하지 않으면 새 페이지를 브라우저에 되돌려주고 200 상태 코드를 지참합니다.
또한 응답 헤더에 브라우저 캐시 설정 속성이 포함되지 않으면 브라우저는 현재 페이지를 캐시하지만, 다음에 같은 페이지를 요청할 때 브라우저는 서버에 직접 캐시 페이지를 요청하지 않습니다.

어떻게 브라우저 캐시를 실현합니까?


1. last-modified


서버가 브라우저에 되돌아오는 응답 헤더에last-modified 속성을 포함하면 브라우저는 이 속성을 페이지와 함께 로컬 캐시에 저장합니다.사용자가 같은 페이지를 요청할 때 브라우저가 보내는 요청 헤더에 속성이 있습니다.
If-Modified-Since:XXXXX

서버는 이 값에 따라 캐시 페이지를 사용할 수 있는지 여부를 판단하고, 캐시를 사용할 수 있으면 304 상태 코드를 되돌리고, 캐시를 사용할 수 없으면 최신 페이지를 되돌리며, 200 상태 코드를 가지고 있습니다.
주의: 서버의 응답 헤더에last-modified 속성이 포함되지 않으면 사용자가 같은 페이지를 요청할 때 브라우저에도 If-Modified-Since: XXXX 속성이 포함되지 않아 서버가 브라우저 캐시를 사용할지 여부를 판단하지 않고 페이지로 되돌아옵니다.

2. ETag 속성 사용


ETag 속성은 Last-Modified 속성과 유사합니다.ETag 속성 값은 일련의 문자열입니다.서버의 응답 헤더에 ETag 속성이 포함되면 브라우저는 페이지와 ETage 속성 값을 함께 캐시합니다.사용자가 같은 페이지를 요청할 때 브라우저는 읽기 영역에 캐시된 ETag 값을 요청 헤더의 If-None-Match:"xxx"속성으로 서버에 보냅니다.서버는 이 속성을 받은 후 브라우저에서 캐시 페이지를 사용할 수 있는지 여부를 판단하고, 허용하면 304 상태 코드를 되돌려주고, 새로운 페이지를 직접 되돌려주지 않으며, 200 상태 코드를 가지고 있습니다.

어떻게 브라우저 캐시를 철저히 실현합니까?


아까의 브라우저 캐시는 브라우저와 서버의 통신과 관련이 있을 수 있습니다. 브라우저는 서버에 로컬 캐시를 사용하는지 물어봐야 하기 때문에 이러한 통신은 여전히 많은 사용자의 대기 시간을 소모해야 합니다.브라우저의 이런 문의를 피할 수 있습니까?

1. Expires 속성 사용


Expires 속성은 만료 시간을 나타냅니다.서버는 응답 헤더에 Expires 속성만 추가하면 브라우저는 이 속성을 페이지와 함께 캐시합니다.사용자가 같은 페이지를 다시 요청하면 브라우저는 이 페이지의 Expires를 현재 시스템 시간과 비교하여 만료 여부를 판단합니다.만료되지 않은 경우 로컬 페이지를 직접 사용합니다.
그러나 사용자의 로컬 시간이 잘못되면 Expires 속성이 그 역할을 할 수 없습니다. 이때 Cache-Control 속성을 사용해야 합니다.

2. Cache-Control 속성 사용


Cache-Control:max-age=3600은 페이지가 현재 시간으로부터 3600초 후에 만료됨을 나타냅니다.따라서 사용자의 로컬 시간 오류를 해결할 수 있습니다.

브라우저 캐시의 장점

  • 브라우저 캐시는 서버의 네트워크 IO를 크게 낮출 수 있고 (심지어 제거) 서버는 더욱 저렴한 대역폭을 임대할 수 있다
  • 브라우저 캐시는 서버 조회 캐시의 조작, 데이터베이스 조작을 감소(심지어 제거)하여 서버의 압력을 줄이고 병렬 수를 높일 수 있다
  • 좋은 웹페이지 즐겨찾기