JavaScript小知识点（三）：web缓存

对于浏览器端的缓存来说，缓存规则是由meta标签和http协议标签头来决定的，然而由于只有部分浏览器支持meta标签且缓存代理服务器都不支持它，所以我们一般都使用http标签头来设置缓存。
有关缓存的标签头分为检测新鲜度（时间过期）和检测校验值（验证机制）

规则	报头	值	类型	作用
新鲜度	Expires	Sun,16 Oct 2016 05:43:02 GMT	响应	告诉浏览器在该时间前可以使用缓存副本
	Cache-Control	no-cache	响应	告诉浏览器忽略缓存，强制请求服务器
		no-store	响应	告诉浏览器不要保留任何缓存
		public	响应	所有客户端都可以缓存(包括传输过程中的代理服务器)
		private	响应	只有终端客户端可以缓存，代理服务器不可以
		max-age=[秒]	响应	指明缓存的有效时长，从请求时到过期时间的秒数
	Last-Modified	Sun,16 Oct 2016 05:43:02 GMT	响应	告诉浏览器当前资源的最后修改时间
	If-Modified-Since	Sun,16 Oct 2016 05:43:02 GMT	请求	如果浏览器第一次请求时返回的响应中有Last-Modified头部，则第二次请求同一资源时会把Last-Modified头部的值作为该项的值发给服务器
校验值	ETag	55df4s67sd54	响应	告诉浏览器该资源在服务器的唯一标识符
	If-None-Match	55df4s67sd54	请求	如果浏览器第一次请求时返回的响应中有ETag头部，则第二次请求同一资源时会把ETag头部的值作为该项的值发给服务器

---

日常使用时一般搭配为Last-Modified/ETag与Cache-Control/Expires这两种方案。
1.cache-control和Expires的作用相似，都是指明该资源的有效期。由于Expires是属于http1.0的，所以属于http1.1协议的cache-control的出现是为了更精细地控制有效期来弥补Expires的不足。因此它们同时出现时cache-control的优先级较高。

2.在配置Last-Modified/ETag的情况下，浏览器访问同一资源时仍然会发送请求（带上相应的If-Modified-Since/If-None-Match）到服务器询问文件是否已经修改。如果没有，服务器则只会发送一个304给浏览器，浏览器接收后会直接从本地缓存中获取数据。这两个头部信息的作用也是相似的，同样的，属于http1.1的ETag的出现也是为了弥补Last-Modified的一些不足，ETag的优先级也较高：

• Last-Modified的时间只能精确到秒级，如果某些文件在一秒内被修改多次的话它将失效。
• 如果某些文件会被定期生成，而内容却没有变化。这时Last-Modified的值改变了，会导致浏览器忽略缓存重新拉取数据。

3.Last-Modified/ETag与Cache-Control/Expires这两种配置方案的不同之处在于：

• 配置Last-Modified/ETag的情况下，浏览器仍然需要发起一次请求来向服务器确认缓存文件的有效性。而Cache-Control/Expires则不需要发起任何请求，如果本地缓存的有效期在Cache-Control/Expires规定的时间内，则直接使用缓存。
• 两者一起使用时Cache-Control/Expires的优先级较高，即当本地缓存根据Cache-Control/Expires判断还在有效期内时不会再发送请求去确认Last-Modified/ETag。

---

一般情况下我们还是会同时设置Last-Modified/ETag与Cache-Control/Expires，因为当用户使用F5刷新时，浏览器会忽略Cache-Control/Expires而不会忽略Last-Modified/ETag设置。当然如果用户使用ctrl+f5强制刷新的话所有缓存机制都会失效。

写在最后

我个人开了一个公众号“前端搬运小工”，我会定期推送优秀的前端精选文章，拒绝无脑基础入门的文章，带给你不一样的前端视角。