说到前端缓存，这真的是一个可以理解也可以遗忘的重灾区。每次看都觉得自己看懂了，但过两天就忘记了。原因是缓存对前端来说很重要，但是控制权在浏览器和服务端。作为前端开发者，我们一般不去控制缓存，它对我们来说是透明的。但这不是我们忘记的原因。为了救自己于水火，写下这篇文章，希望能达到“一目了然，至死不忘”的地步。1、名称解析工作者要想做好工作，必先利其器。在分析整个缓存过程之前，他首先要弄清楚常见的缓存术语。1.1ExpiresExpires：HTTP1.0规范。用来告诉浏览器这个资源的过期时间。例如：Expires:Sun,29Apr201814:21:43GMT每次请求这个资源，浏览器都会自动判断是否超过这个时间。如果没有，它将直接使用缓存（httpstatus:200fromcache）。发送请求。如果超过，查看其他参数的情况。缺点：由于Expires的时间是服务器的时间，如果客户端的时间和服务器的时间不一致，那么Expires就没有用了。1.2Cache-ControlCache-Control：HTTP1.1规范。用于定义缓存的过期时间。Expires存在服务器时间和浏览器时间不一致的问题，所以HTTP1.1新定义了Cache-Control。它是一个通用的HTTP标头，可分别用于请求和响应数据包。比如：Cache-Control有很多可以设置的值，这里只介绍其中最常用的两个。Cache-Control:no-cache//浏览器不缓存，返回结果依赖其他参数。Cache-Control:max-age=600//数字，秒，表示浏览器缓存10分钟。服务器资源被修改，浏览器不会改变。这段时间请求，httpstatus200fromcache。当Cache-Control和Expires同时存在时，Cache-Control会覆盖Expires。你还记得，新一代的HTTP1.1总是比旧的HTTP1.0有更多的优势。缺点：没有缺点。1.3ETagETag：HTTP1.1规范。服务器通过算法计算出的唯一资源标识（类似Md5码）。例如：ETag:"d9f096d1f708c35fdd9c78bd422883cc"Expires和Cache-Control只决定浏览器是否应该向服务器发送请求，而不决定服务器是否应该返回资源。决定服务器操作的是另外两个HTTP标头，ETag和Last-Modified。浏览器会在第一次请求时保留ETag的值，并在下次请求时通过If-None-Match或If-Match这两个请求头将ETag传给服务器。服务器发送过来的ETag是否和自己的ETag一致就可以清楚的知道是否给浏览器一个新的资源文件。如果两者一致，httpresponse返回一个空的response（httpstatus:304），否则，返回一个新的资源（httpstatus:200）缺点：没有缺点。1.4Last-ModifiedLast-Modified：HTTP1.1规范。指示资源在服务器上的最后修改时间。例如：Last-Modified:Sat,28Apr201803:08:34GMT浏览器将在第一次请求时保留Last-Modified的值，并在下一次请求时传递If-Modified-Since或If-Unmodified-Since这两个请求标头将Last-Modified传递给服务器。服务器比较两个Last-Modified是否一致。如果两者一致，则http响应返回一个空响应（http状态：304），否则，返回一个新资源（http状态：200）。好吧，这个产品和ETag完全一样。真是简单的一塌糊涂，妈的。。。=_="Last-Modified和Etag都存在，必须全部匹配才能返回304。这个也很好理解，都是HTTP1.1的小弟，大家有权利统一缺点：如果资源在服务端被修改，但是最终内容没有改变，这时候Last-Modified不会匹配，相当于多返回一个相同的资源文件，浪费流量.2.缓存判断顺序上面已经提到了以下三个规则：Expires和Cache-Control判断浏览器是否向服务器发送请求，ETag和Last-Modified判断服务器是否返回304+空内容或者新的资源文件Expires当与Cache-Control同时存在时，Cache-Control会覆盖ExpiresETag和Last-Modified。当两者都满足时，将返回304。所以缓存判断的顺序可以简单理解为：1.先判断Cache-Control，在Cache-Control的max-age内，直接从缓存中返回2002.如果没有Cache-Control，再判断Expires，在Expires内，直接从缓存中返回2003.Cache-Control=no-cache或者不满足Expires，浏览器向服务器发送请求。4、服务端同时判断ETag和Last-Modified，两者一致，返回304，不一致则返回200，我的缓存没了！很冷的笑话（手动搞笑脸）参考文档《浅谈浏览器http的缓存机制》
