关于HTTP缓存验证Last-Modified和Etag的使用

程序员文章站 2022-03-01 17:22:02

...

关于资源验证

如果给Cache-Control设置no-cache之后，每次浏览器发起对设置了Cache-Control的资源请求的时候
都要去到服务器端进行一个资源的验证, 验证如果资源可以使用，那么才会读取本地的缓存

缓存验证流程

1 ) 浏览器创建了一个请求, 首先请求到达的地方是在本地缓存, 当然是建立在有Cache-Control头的情况下
- 如果在本地缓存里查找，如果找到，则直接返回给浏览器渲染页面
- 这种情况下, 不会经过任何网络的传输，也就是from memory cache的效果
2 ) 如果没有找到，就会去网络请求，在网络请求中，如果经过代理服务器(代理缓存)
- 那么首先会在代理服务器上查找相关缓存信息, 如果找到就会返回给客户端
- 经过本地缓存，再返回给浏览器渲染页面
3 ) 如果在代理服务器上没有找到该缓存信息，那么就直接去源服务器上查找资源
- 获取了新的内容之后，再逐级向下进行返回和二次缓存
- 最终返回给浏览器进行页面的渲染

如何进行缓存验证

在HTTP里主要有两个验证的HTTP头：Last-Modified, Etag
Last-Modified: 上次修改时间
- 也就是说给这个资源设置了上次是什么时间修改的
- 主要配合If-Modified-Since或If-Unmodified-Since使用
- 如果请求了一个资源，其返回头信息中有Last-Modified字段，其指定了一个时间
- 在下一次浏览器发起请求的时候，就会带上这个Last-Modified字段信息
- 通过If-Modified-Since或If-Unmodified-Since
- 通常浏览器的实现会选择If-Modified-Since
- 在请求中将其带到服务器上, 服务器就可以读取头信息中的If-Modified-Since对比该资源上次修改时间
- 如果时间一样，那么代表资源没有被重新修改过, 服务器就可以告诉浏览器可以直接使用缓存的信息
- 这就是对比上次修改时间以验证资源能否使用缓存，是否需要更新的过程
Etag: 是更加严格的一个验证
- 其验证主要是通过数据签名：对资源内容产生一个唯一的签名
- 如果资源数据进行了修改, 签名就会变成一个新的，任何修改就会造成两次签名不一样
- 最典型的方法是对资源内容进行哈希计算, 得到一个唯一值作为签名来标记这个资源
- 下一次浏览器发起请求的时候，就会带上If-Match或If-Non-Match字段，其值就是服务端返回的Etag值
- 对比资源签名，判断是否使用缓存

程序示例

test.html
```
<script src="/script.js"></script>
```

server.js

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

http.createServer((req, res) => {
    console.log('req come: ', req.url);
    if(req.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8');
        // 默认是下面这个writeHead设置，不写也可以
        res.writeHead(200, {
            'Content-Type': 'text/html'
        });
        res.end(html);
    }
    if(req.url === '/script.js') {
        res.writeHead(200, {
            'Content-Type': 'text/javascript',
            'Cache-Control': 'max-age=2000000000, no-cache', // 设置一个较长的值和no-cache
            'Last-Modified': '12345',
            'Etag': '666'
        });
        res.end("alert('script loaded')");
    }
}).listen(8000, () => {
    console.log('server is running on port 8000');
});

启动程序：$ node server.js
访问：http://localhost:8000/
检查浏览器关于script.js中返回的头信息：Cache-Control, Last-Modified, Etag测试成功
刷新浏览器，通过面板检查发现这个script.js还是发送了请求，并没有从memery cache中读取
而且它的Request Headers请求头上携带了If-Modified-Since:12345, If-Non-Match:666这样的信息
这就是在服务器设置了Cache-Control:no-cache, 'Last-Modified': '12345', 'Etag': '666'
浏览器在下次发送请求的时候把对应的验证缓存的头信息给带上, 以验证是否需要更新的策略
但是我们发现浏览器的Response是有内容的, 而且我们知道内容并没有任何的更改
这时候我们当然希望服务器不需要返回实际的内容，而是直接从缓存中读取信息

为了更好解释这一策略，我们稍微修改下程序

if(req.url === '/script.js') {
    // 通用字段的设置
    let ct = 'text/javascript';
    let ccv = 'max-age=2000000000, no-cache'; // 设置一个很长的时间, 同时设置no-cache
    let lm = '12345'; // 先随便设置一个值, 测试浏览器返回头中是否携带
    let et = '666'; // 同上
    // 读取请求头信息的判断返回内容
    const etag = req.getHeader['if-none-match'];
    // 根据请求信息判断返回内容
    if(etag === '777') {
        // 此条件没有修改，使用缓存设置
        res.writeHead(304, {
            'Content-Type': ct,
            'Cache-Control': ccv,
            'Last-Modified': lm,
            'Etag': et
        });
        res.end(""); // 不更新任何东西, 即使返回任何东西，此处都不会真正起作用(不会返回给浏览器客户端)，因为设置了304的HTTP Code
    } else {
        // 更新
        res.writeHead(200, {
            'Content-Type': ct,
            'Cache-Control': ccv,
            'Last-Modified': lm,
            'Etag': et
        });
        res.end("alert('script loaded')"); // 返回js脚本内容
    }
}

修改完程序，重启服务，刷新浏览器一次进行程序的初始化，当第二次刷新浏览器时(也就是再次请求服务端时)
关于script.js的请求信息中的状态码就变成了304 Not Modified
而且发送请求头上的信息有If-Modified-Since和If-Non-Match字段
而且其Response还是之前的内容，和服务端程序中res.end("")的设置无关(即便设置res.end("xxxyyyzzz")也还是原来的内容)
如果在浏览器检查面板上勾选上Disable cache, 那么在Request Headers请求头上不会发送任何缓存验证相关的头信息了
这是Chrome浏览器Disable cache的作用

扩展

1 ) 同样的，如果去除了no-cache的Cache-Control设置
- 经过重启服务，清理浏览器缓存，刷新浏览器等一系列初始化的工作
- 当再次刷新浏览器时, script.js文件就会直接从memory cache中读取(即：from memory cache)
2 ) 如果设置了no-store的Cache-Control
- 即：'Cache-Control': no-store
- 它会忽略任何和缓存相关的设置，每次访问都是200, 直接从服务器端请求最新的数据
3 ) 至于服务端如何真正做缓存验证，这就涉及到服务端设计的问题了，不涉及HTTP的内容了，此处不再详解
- 关于Last-Modified这个时间字段
  - 可以使用文件本身的属性，如上次修改时间属性
  - 如果是存储在服务器中的资源，可以通过设置一个字段，如update_at用于标识和更新即可
- 关于Etag
  - 每次从服务端读取完数据之后, 都做一个签名以及和接收到请求的签名进行对比，这是最简单的方式
  - 当然还会有其他更好的方式来提升服务器的性能, 看你怎么设计了

关于HTTP缓存验证Last-Modified和Etag的使用

关于资源验证

关于H5和CSS3表单验证的使用教程

HTTP缓存头Last-Modified和ETag介绍

关于H5和CSS3表单验证的使用教程

服务端的缓存验证 Last-Modified和Etag

关于ETag和Gzip的基本认知和使用

关于HTTP缓存验证Last-Modified和Etag的使用