Cache review

之前写了篇文章，大概的描述了什么是cache，cache的几种形式

传送门：

简单谈谈四种HTTP缓存控制和用法

https://www.jianshu.com/p/278e93e5b1fb

一年已经过去了，根据最近对这两个知识点的二次研究，review一篇烂笔头

就直接列出一些关键点吧

Cache-Control 和 Expires

cache是通过第一次请求后，response在header中添加了缓存参数

response.setHeader('Cache-Control','login=xxx,max-age=360')

简单暴力，浏览器下次发request时，会看一下时间超过max-age没，决定是否发请求

同样的，还有一种是Expires

response.setHeader('Expires','Mon Jan 01 2018 08:00:00 GMT') //必须用格林威治时间格式

比对的是本地时间和回传时间，未超过则不发起请求

结论：Cache-control和Expires 都决定了client是否需要发request。如果不发request，则会form disk or from memory，这完全取决于浏览器的自主控制

有趣的是，观察了百度腾讯这些网站，max-age都设置了十年，说明说，如果要采用这种缓存方式，就尽情的无限缓存直到页面修改的那一天吧~！

Last-Modified 和 E-TAG

直接贴代码

response.setHeader('Last-Modified','Fri,22 Jul 2016 08:00:00 GMT')

response.setHeader('ETag','3f'd729c07839068ebb6f7f4374981d9f') //一般可用MD

两种方式和以上两种的区别在于， client还是会发出request，让server通过header里的数据去判断是否要重新发送新数据，如果选择缓存，则返回304

request-header:

If-Modified-Since: Last-Modified-value   
if-none-match:ETag-value

可以看出，用时间来定义还是不妥的，这边涉及到一个颗粒度的问题。假如同一秒内请求了N次，然后这N次中真的有数据变化了N次，就会有bug了。

E-Tag的方式则回避了这个问题，目前E-Tag一般使用md5来做唯一标志，md5有16位，重复的概率基本为0。可观百度这样的网站也只使用的前8位md5值就够了。

总结一下

缓存控制一般是后端程序员做的事情，但如今却是一个前端程序员必须要会的知识，所以这就恰好证明了，为啥前端程序员一定要懂一门后端语言？当自己去搭建一个server的时候，我就知道了，原来cache并不是什么魔法，只是在server里setResponseHeader，而客户端对我的header做出了响应。实际项目中，应该考虑项目本身的性质，决定使用哪一种的缓存方式，一般来说是结合使用。毕竟缓存是前端性能优化最有效的方法之一。

引用一张图，基本概括了所有知识点：

image