[头参数]05 - 缓存验证

目录

1. 缓存验证的参数
2. 服务端如何验证缓存？

0. 概述

上一章介绍了使用Cache-Control中max-age的使用，但是有时候我们希望在客户端使用本地缓存前，先询问下服务端能否使用这个缓存，这个操作被称为缓存验证。
下图为验证的流程。

1. 缓存验证的参数

• 修改服务端代码

1. 缓存验证在服务端的响应头中使用Etag或Last-Modified参数，个人认为这两个参数的区别在于语意，Last-Modified通常根据更新时间来判断，而Etag可以自定义任何的值。客户端的请求头中的参数见下图。
2. 更改max-age，让本地缓存短时间内不会过期。
3. 增加no-cache（用逗号分隔），no-cache参数的作用：允许浏览器存储缓存，但是必须访问服务端去验证，由服务端决定能否使用缓存。
4. 在这里我们随意为Etag和Last-Modified赋值。

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

const port = 9000

http.createServer(function (request, response) {
    console.log('request from ', request.url)

    if (request.url === '/') {
        // 读取html发送
        const html = fs.readFileSync('index.html', 'utf-8')
        response.writeHead(200, {
            'Content-Type': 'text/html'
        })
        response.end(html)
    }
    else if (request.url === '/script.js') {
        // 返回响应
        response.writeHead(status, {
            'Content-Type': 'text/javascript',
            'Cache-Control': 'max-age=1000000, no-cache',
            'Etag': 'dyq666',
            'Last-Modified': '111',
        })
        response.end(“console.log('script')”)
    }

}).listen(port)

console.log("serve is listen ", port)

• 观察请求头与响应头

缓存相关的测试，如果不成功，可能是没有清楚浏览器缓存，导致之前的页面缓存在浏览器中。

1. 第一次发送请求，响应头中会返回参数。

   
   

2. 第二次发送请求，浏览器会自动将第一次从响应头中得到的值，通过浏览器规定的参数名发送给服务端。

   
   image.png

2. 服务端如何验证缓存？

• 修改服务端代码

1. 判断请求头中的参数的值是否与之前设置的值相同（代码中判断的是if-none-match，也就是Etag对应的参数）。
2. 如果相同，证明客户端可以使用缓存，则返回304和空的内容，浏览器会根据状态码304去使用缓存。
3. 如果不相同，证明客户端无法使用缓存，则返回一个200和对应的内容，并将当前最新的Etag返回。

/**
 * 1. 验证缓存是否有效
 */
const http = require('http')
const port = 9000

http.createServer(function (request, response) {

    const url = request.url

    switch(url) {
      case '/': {
        response.writeHead(200, {
          'Content-Type': 'text/html'
        })
        response.end('<script src="/script.js"></script>')
      }
      case '/script.js': {
        if (request.headers['if-none-match'] === 'dyq666') {
          status = 304
          body = ''
        } else {
          status = 200
          body = 'console.log("It is script")'
        }
        
        response.writeHead(status, {
          'Content-Type': 'text/javascript',
          'Cache-Control': 'max-age=100000, no-cache',
          'Etag': 'dyq666',
          'Last-Modified': '111'
        })
        response.end(body)
      }
    }

}).listen(port)

console.log("serve is listen ", port)

• 观察响应码

1. 第一次响应中的状态码是200
   
2. 第二次响应中的状态码是304