web前端浏览器缓存应用(带图文解说)

前端缓存一般针对如CSS,JS,image等使用缓存

Expires头
这些标头用于指定相应时间段，浏览器可在指定的这段时间内使用已缓存的资源，而无需查看网络服务器是否提供了新版资源。这些缓存标头功能强大，没有任何应用条件限制。
解读:
炒鸡厉害的缓存，基本接到该资源会看下expires要到什么时候才会结束下图为2037年，缓存20年，本地有缓存会显示200 from cache(以后也不会去跟服务器发请求了)，与第一次正常请求不同的是，第一次请求200.但是from cache会显示文件大小

nginx设置代码

location ~ \.(gif|jpg|jpeg|png|bmp|ico)$ {  //设置后缀格式
    root /data/www/html/;                   //设置文件夹地址
    expires max;                            //设置时间，疑似默认20年     
｝

Cache-Control头
描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。
Cache-Control值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age
挑两个重要的抄下
no-cache指示请求或响应消息不能缓存，该选项并不是说可以设置”不缓存“，而是需要和服务器确认
no-store在请求消息中发送将使得请求和响应消息都不使用缓存，完全不存下來。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。上次缓存时间（客户端的）+max-age（64200s）<客户端当前时间

nginx代码

location ~ \.(html|htm)$ {
        root /data/www/html/;
        expires -1;                                                     //永久不缓存，这个也设置下不缓存
        add_header Cache-Control no-cache;          //不缓存，试了好几次，可能之前设置测试的头有点多，之前设置一个expires好像不好使，两个都设置比较安全。
}

Last-Modifed和ETag标头

这些标头可用于指定浏览器应如何确定用于缓存的文件是否相同。在Last-Modified标头中指定的是日期，而在ETag标头中指定的则可以是唯一标识资源的任意值（通常为文件版本或内容哈希值）。Last-Modified是功能“较弱”的缓存标头，因为浏览器会使用试探法来确定是否需要从缓存中抓取内容。

借助这些标头，浏览器可以通过在用户明确重新加载页面时发出条件式GET请求，有效地更新其已缓存资源。除非您在服务器端更改资源，否则条件式GET请求不会返回完整的响应，因此相较于完整GET请求，此类请求的延迟较小。
解读 ：
这个是比较灵活的，浏览器在发送请求之后，收到返回头的这两个头（一般来说只设置一个），对比下Etag，啊是上一次的，那么就不下载了，304，但是304B是http头的大小，还是要发请求给浏览器的

额，我感觉Etag这个服务器都会自动配好的！蛤蛤

我应使用哪个缓存标头？
一般来说我自己的话会将永远不会变的或者变起来名字也会变的用expires缓存，如logo.png，avatar-123.jpg，index-xxxxx.js这种请求都不用请求了，不然nginx没设置好，好像还会有惊群的情况（就是一个请求很多个线程会等待，然后就一个线程最终获取到，产生了不少的消耗，好像很厉害的样子，推荐nginx用use epoll），然后其他的像index.html，这种经常会变的，就让他自己用304缓存好了。

详细解读https://segmentfault.com/a/1190000006741200

最后盗张图