摘要：说起前端缓存，这真是一个百看百懂，百懂百忘的重灾区。作为一个前端开发，我们一般不控制缓存，它对我们来说是透明的。名字解析工欲善其事必先利其器，在分析整个缓存流程之前，先明确常见的缓存名词。它是一个通用头，能分别在请求报文和响应报文中使用。
说起前端缓存，这真是一个百看百懂，百懂百忘的重灾区。每次看的时候都觉得自己懂了，但是过两天又忘了。究其原因，缓存对前端来说很重要，但是控制权却是在浏览器和服务器手上。作为一个前端开发，我们一般不控制缓存，它对我们来说是透明的。但是这不是我们忘记的理由。为了拯救我自己于水火之中，所以写了这篇文章，期望于达到“一看就懂，至死不忘”的地步。1. 名字解析
工欲善其事必先利其器，在分析整个缓存流程之前，先明确常见的缓存名词。
1.1 ExpiresExpires: HTTP 1.0的规范。用来告诉浏览器这个资源的过期时间。
例如： Expires:Sun, 29 Apr 2018 14:21:43 GMT
每次请求这个资源时，浏览器自动判断是否超出了这个时间，如果没有超出，就直接使用缓存(http status:200 from cache)，不发送请求。如果超出，看其他参数的情况。
缺点：由于Expires这个时间是服务器端的时间，如果客户端的时间和服务器端的时间有误差，那么Expires就没什么用了。
1.2 Cache-ControlCache-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 ETagETag: 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-ModifiedLast-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，有任何一个不一致，返回2003. 总结
弄清楚它们的关系之后，是不是贼简单，妈妈再也不用担心我的缓存啦！好冷的笑话（手动滑稽脸）
参考文档《浅谈浏览器http的缓存机制》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/61968.html
摘要：的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。它也是一个被标准废弃的功能，主要是通过文件来标注要被缓存的静态文件清单。尽管也有文件，但是与应用缓存却完全不同。另外，用来控制缓存的使用。 最近把前端缓存重新整理了一下，从整体的层面上把前端所有能用的缓存方案梳理了一遍。同时，对于http缓存，使用了表格的方案，使得原先晦涩难记的特性变得清晰明了。特记录于此，若有什么欠缺，也望...
摘要：的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。它也是一个被标准废弃的功能，主要是通过文件来标注要被缓存的静态文件清单。尽管也有文件，但是与应用缓存却完全不同。另外，用来控制缓存的使用。 最近把前端缓存重新整理了一下，从整体的层面上把前端所有能用的缓存方案梳理了一遍。同时，对于http缓存，使用了表格的方案，使得原先晦涩难记的特性变得清晰明了。特记录于此，若有什么欠缺，也望...
摘要：说起前端缓存，这真是一个百看百懂，百懂百忘的重灾区。作为一个前端开发，我们一般不控制缓存，它对我们来说是透明的。名字解析工欲善其事必先利其器，在分析整个缓存流程之前，先明确常见的缓存名词。它是一个通用头，能分别在请求报文和响应报文中使用。 说起前端缓存，这真是一个百看百懂，百懂百忘的重灾区。每次看的时候都觉得自己懂了，但是过两天又忘了。究其原因，缓存对前端来说很重要，但是控制权却是在浏...
摘要：说起前端缓存，这真是一个百看百懂，百懂百忘的重灾区。作为一个前端开发，我们一般不控制缓存，它对我们来说是透明的。名字解析工欲善其事必先利其器，在分析整个缓存流程之前，先明确常见的缓存名词。它是一个通用头，能分别在请求报文和响应报文中使用。 说起前端缓存，这真是一个百看百懂，百懂百忘的重灾区。每次看的时候都觉得自己懂了，但是过两天又忘了。究其原因，缓存对前端来说很重要，但是控制权却是在浏...
阅读 2376·2021-11-17 17:00
阅读 1517·2021-10-11 10:57
阅读 3474·2021-09-09 11:33
阅读 697·2021-09-09 09:33
阅读 3419·2019-08-30 14:20
阅读 3212·2019-08-29 11:25
阅读 2700·2019-08-26 13:48
阅读 613·2019-08-26 11:52
