一篇文章理解前端缓存

提及前端缓存，这真是一个百看百懂，百懂百忘的重灾区。每次看的时候都以为本身懂了，可是过两天又忘了。究其缘由，缓存对前端来讲很重要，可是控制权倒是在浏览器和服务器手上。做为一个前端开发，咱们通常不控制缓存，它对咱们来讲是透明的。可是这不是咱们忘记的理由。为了拯救我本身于水火之中，因此写了这篇文章，指望于达到“一看就懂，至死不忘”的地步。

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的缓存机制》