解密浏览器缓存

背景

        前端测试同学测试过程中经常会听开发同学说“应该是缓存导致的，等会吧”，或者“有缓存，清一下缓存吧”。为了不被开发同学忽悠，最近查阅了一些关于浏览器缓存的资料。接下来总结一下学习所得。

为什么要做缓存

        通过网络获取内容速度慢且开销大。较大的响应需要在客户端和服务器之间进行多次通信，这也会延迟浏览器获得和处理内容的时间，还会增加访问者的流量。所以缓存并且重复利用之前获取的资源，对于前端性能是非常重要的部分。

        每个浏览器都自带了HTTP缓存实现功能。只需要保证每个服务器响应都提供正确的HTTP HEAD。

HTTP1.0时代的缓存方式

1. Pragma：可以在html文件的head中设置（如下代码），也可以在请求头文件中设置-------主要用来禁用缓存
   • 当Pragma的值为no-cache时，告诉客户端不对该资源进行缓存，每次都向服务器进行请求

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

         2.Expires：用来设置缓存时间，如下：

Expires: Fri, 11 Jun 2021 11:33:01 GMT

当前时间在Expires设置的时间之前时，都是用缓存里的时间

注意：Pragma的优先级高于Expires，也就是如果Pragma设置了禁用缓存，无论Expires是否设置都视为无效

存在的问题：Expires所定义的魂村时间是相对于服务器上的时间而言的，如果客户端上的时间和服务器上的时间不一致，那设置缓存就没有什么意义了。所以HTTP1.1中有更好的缓存方式。

HTTP1.1时代的缓存方式

Cache-Control

Cache-Control是一个通用的首部字段，它能分别在请求报文和响应报文中使用。优先级：Pragma>Cache-Control>Expires.

1. 作为请求首部时，Cache-Control的可选值为：
   • no-cache-----告知服务器（代理）不使用缓存并向原服务器发起请求
   • no-store-----所有内容都不会保存在缓存或者网络临时文件中
   • max-age-----指定从请求的时间开始，允许获取的响应被重用的最长时间（秒）
   • max-stale-----可使用过期缓存，但是过期时间必须小于max-stale的值
   • min-fresh-----可使用在m