浏览器缓存-Etag

（一）缓存种类

私有缓存只能用于单独用户。

共享缓存可以被多个用户使用。

（二）缓存的新鲜度

缓存驱逐：缓存只有有限的空间用来存储资源副本，因此会定期将一些副本删除，此过程称之为缓存驱逐。

　　　　　　　　　　　陈旧的资源是不会直接被清除或忽略的。

当客户端发送一个请求，缓存检索到陈旧资源时，会将此请求加上 “If-None-Match”头，发给web服务器；

web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对，决定返回200或304

　　　　　　　　 If-None-Match: 条件式请求首部，带上所请求资源的实体标签，即Etag所带的值（If-None-Match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d" ）。

If-Modified-Since：其值为上次响应头的Last-Modified值（资源最后的修改时间），再次向web服务器请求时带上（Wed, 21 Oct 2015 07:28:00 GMT）

　　　　　　　　　　　　　　　　　　　　（服务器只在所请求的资源在给定的日期时间之后对内容进行过修改的情况下才会将资源返回，状态码为 200）。

当与 If-Modified-Since 一同使用的时候，If-None-Match 优先级更高。

（三）缓存的控制

Pragrma 头

是HTTP/1.0标准中定义的一个header属性，请求中包含Pragma的效果跟在头信息中定义Cache-Control: no-cache相同，

但是HTTP的响应头不支持这个属性，所以它不能拿来完全替代HTTP/1.1中定义的Cache-control头。通常定义Pragma以向后兼容基于HTTP/1.0的客户端。

　　　 Cache-Control

　　　　 no-cache, no-store, must-revalidate，max-age=31536000

（四）缓存验证

　　当缓存文档过期后，需要进行缓存文档验证或者重新获取资源。

只有在服务器返回Etag（强校验器）或Last-Modified（弱校验器）才会校验。

　　 ETag：当前资源在服务器的唯一标识符（生成规则由服务器决定），与If-None-Match成对出现。

Last-Modified:响应首部，是服务器认定的资源修改时间，精度比Etag低，只能精确到1s，与If-Modified-Since或If-Unmodified-Since成对出现。

　　　　　当两者同时出现，ETag优先级更高。

　　　　 Etag的出现主要是为了弥补后者不足。

　　　　　　1、Last-Modified只能精确到1s,如果文件在1s内被多次修改，则文件的新鲜度不能改保证。

　　　　　　2、文件如果是定时生成，文件内容并没有改变，但是修改时间变化了，则客户端没有必要重新获取。

　　　　　　3、服务器肯能异常，没有准确获取文件修改时间，或者代理服务器异常。

　　　如下Demo 使用Node模拟缓存设置。

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

http.createServer((request, response) => {
    if (request.url === '/') {
        // 启动时访问的路径
        const html = fs.readFileSync('Etag.html');
        response.writeHead(200,{
            'Content-Type':'text/html'
        });

        response.end(html);
    }

    if (request.url === '/script.js') {
        console.log('开始 js 请求')
        // 读取 Etag.html 后，会立即访问 script.js资源，发送一次请求
        response.writeHead(200,{
            'Content-Type':'text/html',
            'Cache-Control':'max-age=2000,no-cache',
            'Etag':'999'
　　　　　　　'Last-Modified':'REEEEEE'

        });

        const etag=request.headers['if-none-match'];
        if(etag==='999'){
            // 模拟 数据未发生变化，从缓存里获取
            response.writeHead(304,{
                'Content-Type':'text/javascript',
                'Cache-Control':'max-age=20000,no-cache',
                'Etag':'999',
　　　　　　　　　 'Last-Modified':'REEEEEE'

            });
            response.end('');
        }else{
            response.end('console.log("script js loading");')
        }
    }
}).listen(9999);

  Etag.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script src="script.js"></script>
        <p>Etag If-Match If-None-Match</p>
        <p>Last-Modified If-None-Modified</p>
    </body>
</html>

posted on 2019-03-06 14:25 Herry彬阅读(411) 评论(0) 收藏举报