브라우저 캐시 정책

1. 앞말

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

브라우저 캐시는 브라우저에서 요청을 할 때 서로 다른 정책에 따라 해당하는 캐시 위치에서 자원을 얻는 것입니다.
그래서 우리는 두 가지 측면에서 착수한다. 하나는 정책이고, 다른 하나는 캐시 위치이다.

2 캐시 프로세스 분석

그렇다면, 브라우저가 이 자원을 캐시해야 하는지 어떻게 확인합니까?이 행위는 누가 결정합니까?
한 그림이 천 마디를 이긴다. 다음은 그림을 통해 캐시의 과정을 설명하고 이 과정을 바탕으로 서로 다른 캐시 정책을 행사할 것이다.
이 그림에서 알 수 있듯이 우리가 처음으로 서버를 요청할 때 서버는 자원을 되돌려주고 캐시 여부와 캐시 규칙을 결정합니다.다음에 요청할 때 브라우저에 사용할 수 있는 캐시가 있는지 직접 물어봅니다.없으면 서버를 요청하고 요청 결과와 캐시 표지를 브라우저 캐시에 넣습니다.
흐름도는 다음과 같습니다.

3. 캐시 정책

하나.강제 캐시

강제 캐시란 무엇입니까? 서버에 자원을 요청하지 않고 브라우저에서 직접 자원을 얻습니다. 강제 캐시는 주로 두 가지가 있습니다.

1.cache-control

우리가 처음으로 서버에 자원을 요청하였을 때, 아래의 몇 단계를 거쳐
브라우저는 우리에게 네가 원하는 캐시가 없으니 서버를 찾아가서 달라고 할 것이다.
브라우저는 서버에 자원을 요청하고 서버가 자원을 되돌려주는 동시에 응답 헤더에 강제 캐시를 대표하는 캐시 헤더와 캐시 옵션을 설정합니다.서비스 시작 코드는 다음과 같습니다.

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
  if (request.url === '/get') {
    const html = fs.readFileSync('test.html', 'utf8')
    response.writeHead(200, {
      'Content-Type': 'text/html'
    })
    response.end(html)
  }

  if (request.url === '/user/list') {
    response.writeHead(200, {
      'Content-Type': 'text/javascript',
      'Cache-Control': 'max-age=100' //  ,
    })
    response.end('console.log("script loaded twice")')
  }
}).listen(3000)

그러면 자원으로 돌아가서 브라우저로 돌아가면 브라우저는 캐시 정책에 따라 강제 캐시를 합니다.
Cache-Control에는 다음과 같은 옵션이 있습니다.

2.Expires

캐시 만료 시간, 가져온 자원의 만료 시간을 지정합니다. 시간은 서비스 측의 구체적인 시점을 가리킵니다.
따라서 로컬 시간을 수정하면 캐시가 효력을 상실할 수 있습니다.

비교:

사실 이 두 가지 차이는 크지 않다. 차이점은 Expires는 http1.0의 산물이고, Cache-Control은 http1.1의 산물이다.
둘 다 존재하면 Cache-Control 우선순위가 Expires보다 높습니다.Expires는 HTTP1.1이 지원되지 않는 일부 환경에서 사용됩니다.그래서 Expires는 사실 유행이 지난 산물로 현 단계에 그 존재는 호환적인 묘사일 뿐이다.강제 캐시가 캐시 여부를 판단하는 근거는 특정한 시간이나 특정한 시간대를 초과했는지, 서버측 파일이 업데이트되었는지에 상관없이 서버측의 최신 내용이 아닌 파일을 불러올 수 있습니다.
그러면 우리는 서버 측의 내용이 이미 업데이트되었는지 어떻게 알 수 있습니까?이때 우리는 협상 캐시 정책을 사용해야 한다.

2. 협상 캐시

협상 캐시란 무엇입니까? 강제 캐시가 효력을 상실한 후에 서버는 표지를 가지고 서버에 캐시를 사용해야 하는지 알려 줍니다. 만약 서버가 캐시를 사용하는 것에 동의한다면 304로 돌아가고 브라우저는 캐시를 사용합니다.자원이 업데이트되었을 때 서버가 캐시 사용에 동의하지 않으면 업데이트된 자원과 표지를 브라우저에 되돌려주고 200을 되돌려줍니다.

1.last-modified와 if-modified-since

처음 서비스 단말기를 요청할 때, 서비스 단말기는 응답 헤더에last-modified:Wed, 22 May 2019 03:53:42 GMT

If-Modified-Since HTTP ， HTTP ， ， 。

• ， HTTP 304（ ）， ， 。
• ， HTTP 200 ， ， ， ， 。

，last-modified

1. ， ， ， Last-Modified ， 。
2. Last-Modified ， ， ， 。

？ 。

2. ETag 및 If-None-Match

， etag if-none-match

Etag ， ， 。 ， Etag 。 ， Etag request header If-None-Match ， If-None-Match ETag ， 。 ETag ， GET 200 （ ETag） ； ETag ， 304 。

3. 양자 대비

• ，Etag Last-Modified。

• ，Etag Last-Modified， Last-Modified ， Etag hash 。
• ， Etag

참고문

:https://juejin.im/post/5ce9e3e3e51d455a68490ad4