一篇文章理解前端缓存

说起前端缓存，这真是一个百看百懂，百懂百忘的重灾区。每次看的时候都觉得自己懂了，但是过两天又忘了。究其原因，缓存对前端来说很重要，但是控制权却是在浏览器和服务器手上。作为一个前端开发，我们一般不控制缓存，它对我们来说是透明的。但是这不是我们忘记的理由。为了拯救我自己于水火之中，所以写了这篇文章，期望于达到“一看就懂，至死不忘”的地步。

1. 名字解析

工欲善其事必先利其器，在分析整个缓存流程之前，先明确常见的缓存名词。

1.1 Expires

Expires: HTTP 1.0的规范。用来告诉浏览器这个资源的过期时间。

例如： Expires:Sun, 29 Apr 2018 14:21:43 GMT

每次请求这个资源时，浏览器自动判断是否超出了这个时间，如果没有超出，就直接使用缓存(http status:200 from cache)，不发送请求。如果超出，看其他参数的情况。

缺点：由于Expires这个时间是服务器端的时间，如果客户端的时间和服务器端的时间有误差，那么Expires就没什么用了。

1.2 Cache-Control

Cache-Control: HTTP 1.1规范。用来定义缓存的过期时间。

Expires有服务器时间和浏览器时间不统一的问题，所以HTTP 1.1新定义了Cache-Control。它是一个通用HTTP头，能分别在请求报文和响应报文中使用。例如：

Cache-Control有很多值可以设置，在这里只介绍两个最常用的。

Cache-Control: no-cache // 浏览器不缓存, 返回的结果要看其他参数的情况

Cache-Control: max-age=600 // 数字，秒，表示浏览器缓存10分钟，这段时间内即使服务器资源有修改，浏览器也不会改变，这段时间内请求，http status是200 from cache

当Cache-Control和Expires同时存在时，Cache-Control会覆盖Expires。可以这么记忆，HTTP 1.1的新生代比老的HTTP 1.0总要有更多的优势。

缺点：没有缺点。

1.3 ETag

ETag: HTTP 1.1规范。服务器通过算法计算出的资源唯一标志符（类同Md5码）。

例如：ETag:"d9f096d1f708c35fdd9c78bd422883cc"

Expires和Cache-Control只决定了浏览器是否要发送请求到服务器，并没有决定服务器是否要返回资源。决定服务器操作的是另外两个HTTP头，ETag和Last-Modified。

浏览器在第一次请求时会保留ETag的值，并在下一次请求时通过If-None-Match或If-Match两个请求头将ETag传给服务器。服务器传来的ETag跟自己的ETag是否一致，就能清楚的知道是否要给浏览器新的资源文件。如果两者一致，则http response返回空响应(http status:304)，否则，返回新的资源(http status:200)

缺点：没有缺点。

1.4 Last-Modified

Last-Modified: HTTP 1.1规范。表示资源在服务器上的最后修改时间。

例如：Last-Modified:Sat, 28 Apr 2018 03:08:34 GMT

浏览器在第一次请求时会保留Last-Modified的值，并在下一次请求时通过If-Modified-Since或If-Unmodified-Since两个请求头将Last-Modified传给服务器。服务器比对两个Last-Modified是否一致。如果两者一致，则http response返回空响应(http status:304)，否则，返回新的资源(http status:200)

唔，这货与ETag简直一模一样有没有。真的是简单的一塌糊涂呢，可恶……=_="Last-Modified和Etag都存在的情况，它们要都符合才能返回304。这也很好理解，都是HTTP1.1的小兄弟，大家权利要统一。

缺点：如果这个资源在服务器上被修改了，但是最后的内容却没有变。这时候Last-Modified就匹配不上了，相当于多返回了一个相同的资源文件，浪费了流量。

2. 缓存判断顺序

上面已经说过以下三条规则：

• Expires和Cache-Control决定了浏览器是否要发送请求到服务器，ETag和Last-Modified决定了服务器是要返回304+空内容还是新的资源文件
• Expires和Cache-Control同时存在时，Cache-Control会覆盖Expires
• ETag和Last-Modified同时存在时，两者都要满足才会返回304

所以，缓存判断顺序可以简单的理解为：

 1. 先判断Cache-Control，在Cache-Control的max-age之内，直接返回200 from cache
 2. 没有Cache-Control再判断Expires，再Expires之内，直接返回200 from cache
 3. Cache-Control=no-cache或者不符合Expires，浏览器向服务器发送请求
 4. 服务器同时判断ETag和Last-Modified，都一致，返回304，有任何一个不一致，返回200
 

3. 总结

弄清楚它们的关系之后，是不是贼简单，妈妈再也不用担心我的缓存啦！好冷的笑话（手动滑稽脸）

参考文档

1. 《浅谈浏览器http的缓存机制》