http缓存

使用http缓存

http缓存主要针如css，js，图片等更新频率不大的静态文件。
http缓存请求相应头
1.Cache-Control
请求/响应头，缓存控制字段，可以说是控制http缓存的最高指令，要不要缓存也是它说了算。
它有以下常用值
　　1.1 no-store：所有内容都不缓存
　　1.2 no-cache：缓存，但是浏览器使用缓存前，都会请求服务器判断缓存资源是否是最新，它是个比较高贵的存在，因为它只用不过期的缓存。
　　1.3 max-age=x(单位秒) 请求缓存后的X秒不再发起请求，属于http1.1属性，与下方Expires(http1.0属性)类似，但优先级要比Expires高。
　　1.4 s-maxage=x(单位秒) 代理服务器请求源站缓存后的X秒不再发起请求，只对CDN缓存有效(这个在后面会细说)
　　1.5 public 客户端和代理服务器(CDN)都可缓存
　　1.6 private 只有客户端可以缓存
2.Expires
响应头，代表资源过期时间，由服务器返回提供，GMT格式日期，是http1.0的属性，在与max-age(http1.1)共存的情况下，优先级要低。
3.Last-Modified
响应头，资源最新修改时间，由服务器告诉浏览器。
4.if-Modified-Since
请求头，资源最新修改时间，由浏览器告诉服务器(其实就是上次服务器给的Last-Modified，请求又还给服务器对比)，和Last-Modified是一对，它两会进行对比。
5.Etag
响应头，资源标识，由服务器告诉浏览器。
6.if-None-Match
请求头，缓存资源标识，由浏览器告诉服务器(其实就是上次服务器给的Etag)，和Etag是一对，它两会进行对比。

强缓存

1.让服务器与浏览器约定一个文件过期时间——Expires(GMT时间格式)。

时间没过，不发起请求，直接使用本地缓存。
时间过期，发起请求，继续上述的浏览器与服务器的谈话日常。
问题：假设Expires已过期，浏览器再次请求服务器，但a.js相比上次并未做任何改变，那这次请求我们是否通过某种方式加以避免？

2.让服务器与浏览器在约定文件过期时间的基础上，再加一个文件最新修改时间的对比——Last-Modified(最新修改时间)与if-Modified-Since(也就是上次请求服务器返回的Last-Modified)

Expires未过期，浏览器机智的使用本地缓存，免得挨打。
Expires过期，服务器带上了文件最新修改时间if-Modified-Since(也就是上次请求服务器返回的Last-Modified)，服务器将if-Modified-Since与Last-Modified做了个对比。
if-Modified-Since 与Last-Modified不相等，服务器查找了最新的a.js，同时再次返回Expires与全新的Last-Modified
if-Modified-Since 与Last-Modified相等，服务器返回了状态码304，文件没修改过，你还是用你的本地缓存。
问题：浏览器端可以随意修改Expires，Expires不稳定，Last-Modified只能精确到秒，假设文件是在1s内发生变动，Last-Modified无法感知到变化，这种情况下浏览器永远拿不到最新的文件(假想极端情况)。

3.让服务器与浏览器在过期时间Expires+Last-Modified的基础上，再增加一个文件内容唯一对比标记——Etag与If-None-Match。哦对了，我们说Expires不稳定，这里我们再加入一个max-age来加以代替(cache-control其中一个值)。

60S内，不发起请求，直接使用本地缓存。（max-age=60代表请求成功缓存后的60S内不再发起请求，与Expires相似，同时存在max-age优先级要比Expires高，区别后面具体说）
60S后，浏览器带上了if-Modified-Since 与If-None-Match(上次服务器返回来的Etag)发起请求，服务器对比If-None-Match与Etag(不对比if-Modified-Since与Last-Modified了，Etag优先级比Last-Modified高，毕竟更精准
If-None-Match与Etag不相等，说明a.js内容被修改过，服务器返回最新a.js与全新的Etag与max-age=60与Last-Modified与Expires
If-None-Match与Etag相等，说明a.js文件内容无任何改变，返回304，告诉浏览器继续使用之前的本地缓存。

http缓存

1.md5/hash缓存

通过不缓存html，为静态文件添加MD5或者hash标识，解决浏览器无法跳过缓存过期时间主动感知文件变化的问题；
注意，这里不推荐缓存html文件(或许有更好的做法，欢迎留言)，这样每次html加载渲染都可以感知文件变化，反正文件没变还是使用本地缓存，文件名都变了说明修改过，重新请求缓存就好了。
webpack-md5-hash插件，可以帮助开发者在项目发布时自动修改文件标识。

2.CDN缓存

CDN边缘节点缓存数据，当浏览器请求，CDN将代替源站判断并处理此处请求

各种方式对缓存的影响

image.png

http强缓存

不发起http请求，直接使用本地缓存，比如浏览器地址栏回车，使用浏览器的刷新按钮，在Expires或max-age生效的情况下，触发的都是强缓存

协商缓存(弱缓存)

在使用本地缓存前，先与服务器协商，核对缓存文件是否为最新。比如设置了cache-control=no-cache，不管你做任何操作，都会发起请求，这一类就是协商性缓存了。

.max-age和Expires的区别

在用fiddler抓包的时候，发现不少网站同时设置了max-age和Expires，为毛要设置两个，功能不都差不多吗，两者区别是啥？
1.max-age是http1.1的属性，Expires是http1.0的属性，为了做到向下兼容，一般写两个。但如在1.1环境下，max-age优先级比Expires高。
2.max-age是相对过期时间，Expires是绝对过期时间。max-age在浏览器成功缓存文件后，只需相对请求成功之后的多长时间不再发起请求就好了，而Expires总是需要服务器返回一个精准的GMT格式的日期，并以这个日期为标准来判断缓存是否过期，相对就比较麻烦，所以才有了max-age这样的存在来代替它。
同理，no-cache和 Pargma也是这样的存在，一个是1.1的属性，一个是1.0，向下兼容，同时写了两个。
参考链接：https://www.zhihu.com/question/20790576