Last-Modified

 上次修改时间
 配合If-Modified-Since或者If-Unmodified-Since使用
 对比上次修改时间验证资源是否需要更新

ETag

数据签名
典型做法：对资源内容进行hash计算
配合If-Match或者Id-Non-Match使用
对比资源的签名判断是否使用缓存

缓存验证流程

在浏览器和服务端设置都允许缓存策略的前提下（服务端响应头的Cache-Control不为no-store，即禁止任何缓存），如果某个请求的响应头设置了Last-Modified或Etag：

第一次请求：浏览器会记住响应头的Last-Modified和Etag；
第二次及以后请求：浏览器会携带保存的Last-Modified和Etag分别作为If-Modified-Since和If-None-Match放入请求头中携带过去，以此到服务端验证此次请求的资源是否过期或更新；服务端进行判断，若过期或更新，则返回新的资源，否则返回空即可，节省服务端消耗。

实例

node服务文件：server.js

// server.js
const http = require('http')
const fs = require('fs')

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

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

    if (request.url === '/script.js') {
        const etag = request.headers['if-none-match']
        console.log(request.headers);

        if (etag === '777') {

            response.writeHead(304, {
                'Content-Type': 'text/javascript',
                'Cache-Control': 'max-age=200000000, no-cache',
                'Last-Modified': '123',
                'Etag': '777'
            })
            response.end('console.log("script loaded")')
        } else {
            response.writeHead(200, {
                'Content-Type': 'text/javascript',
                'Cache-Control': 'max-age=200000000, no-cache',
                'Last-Modified': '123',
                'Etag': '777'
            })
            response.end('console.log("script loaded")')
        }
    }
}).listen(8888)

console.log('server listening on 8888')

test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body></script> -->
<script>
</script>
<script src="/script.js"></script>

</html>

0、打开命令行，在server.js目录下输入：node server，观察到打印了server listening on 8888
1、打开开发者调试工具
2、浏览器输入 http://localhost:8888
3、可以观察到script.js请求成功，响应头中有Last-Mpdified和Etag
4、刷新页面，可以观察到script.js请求返回状态码304，而且请求头中携带了If-Modified-Since和If-None-Match，他们的值刚好是上次请求中服务端返回的Last-Mpdified和Etag

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

Last-Modified

ETag

缓存验证流程

实例

猜你喜欢