浏览器缓存机制

引子

昨天晚上上线到很晚，今天早上迷迷糊糊到公司就看到领导在群里@我，气冲冲的说为什么我回车网址还是以前的页面，技术leader好心提醒他说有缓存，刷新一下就好了。果然刷新一下就好了，领导消气完之后跑过来说我不要缓存，好吧，本着我一贯拍领导马屁不动摇的原则，我把电脑和刀抱到运维同学旁边搞了半天，才保证领导每次看到的200的请求返回。

Expires

HTTP头信息Expires（过期时间）属性是HTTP控制缓存的基本手段，这个属性告诉缓存器：相关副本在多长时间内是新鲜的。过了这个时间，缓存器就会向源服务器发送请求，检查文档是否被修
改。几乎所有的缓存服务器都支持Expires（过期时间）属性；

其实大白话来说，就是服务器设置的一个失效时间，通过response头Expires属性告诉浏览器你需不需要重新向服务器发送请求，如果Expires未失效，HTTP返回状态显示200 OK，但是请求并没有真正提交到HTTP服务器，而是浏览器发现缓存中还有未过期的文件，当我们在浏览器地址栏按回车这个属性才会生效。

ETag

ETag或实体标签（entity
tag）是万维网协议HTTP的一部分。ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制，并且允许客户端进行缓存协商。这就使得缓存变得更加高效，而且节省带宽。如果资源的内容没有发生改变，Web服务器就不需要发送一个完整的响应。ETag也可用于乐观并发控制，作为一种防止资源同步更新而相互覆盖的方法。

简单来说，ETag是服务器为文件生成的md5戳，如果ETag是处于关闭的状态，则浏览器会跳过此环节。如果此时etag是存在的，浏览器会带着这个戳请求服务器，服务器根据这个戳是否变化判断是否缓存静态资源，这个时候如果服务器判断这个值并没有变化，那么就会返回304的请求头。

Last-Modified

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记(HttpReponse
Header)此文件在服务期端最后被修改的时间

如果服务器端的资源没有变化，则自动返回 HTTP 304（Not Changed.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

看过很多文章将缓存，好像大家都忽略了一件事，就是浏览器地址栏按回车、F5、Ctrl+F5刷新网页缓存是各不一样的。
回车在 Expires有效的时候，是不会去请求服务器的，直接读取本地硬盘缓存。
F5 Cache-Control: no-cache，只有Last-Modified/ETag有效果。
Ctrl+F5则会发送 Cache-Control: no-cache，If-Modified-Since off，etag off，真正的从服务器重新获取文件，此时缓存完全失效。

结尾上代码

 location ~ .*\.(gif|jpg|jpeg|bmp|png|ico|txt|js|css|html)$
{

    root   /usr/share/nginx/html;
    expires      -1;
    add_header Last-Modified $date_gmt;
    if_modified_since off;
    etag off;
}

其实现在每次上线的js css文件都是webpack打包生成文件名都会带上md5戳，只有html文件会存在上线缓存。没办法，为了满足领导的口味，我含泪让运维按上面的代码把nginx配置改了。。