前言最近一个好奇的测试同学问我，你前端开发完成后，让我们每次清缓存还是按Ctrl+f5强制刷新，不用每次都强制刷新，我能看到你更新的内容吗？我说可以，我给大家说说浏览器的缓存策略。相信很多同学在工作中都会遇到这种情况，要求你的测试同学清空缓存等等。Cache浏览器缓存是为了节省网络资源，加??快浏览速度。浏览器将最近请求的文档存储在用户的磁盘上。当访问者再次请求该页面时，浏览器可以显示本地磁盘或内存中的文档。这可以加快页面浏览速度。浏览器缓存主要有两种：强缓存：cache-control，Expires缓存协商：Last-modified，Etag。所有缓存策略都是通过http标头设置的。强缓存当浏览器去获取资源时，并不向服务器发送请求，而是直接从缓存中读取。Expires（过期时间）Expires（缓存过期时间）是http1.0的产物，用于指定资源的过期时间，也就是服务器返回的时间点。从上图中我们可以看出Expires:Thu,20Jan202207:50:17GMT在此之后就会过期，请求的资源将不会从缓存中获取。缺点：时间的判断是通过本地解释。如果将本地时间调整为更高的值，则缓存可能会失效。Cache-ControlCache-Control是http1.1控制缓存的重要字段。如果Cache-Control存在，它的优先级会高于Expires。常用取值如下名称说明public表示可以被客户端和代理服务器缓存private表示只能被客户端缓存max-age=30单位是秒（s），表示30s以内，得到s-maxage=30from-cache和根的max-age一样，表示只在代理中生效no-sotre不缓存任何响应no-cache资源被缓存，但是会立即过期，并且下一次请求会验证资源是否在30s内通过了max-stale=30，缓存过期，也会从缓存中读取协商缓存。协商缓存是指在缓存被强制过期后，浏览器向服务器发送带有缓存标识的请求，服务器根据缓存标识决定是否使用缓存。主要有两组一起使用：Last-ModifiedandIf-Modified-SinceEtag和If-None-MatchLast-ModifiedandIf-Modified-Since当浏览器第一次访问资源时，返回资源的同事服务器会将Last-Modified键添加到Response标头中。指示资源的最后修改时间。浏览器在收到文件和标头后缓存它。下次请求该资源时，浏览器会检测到请求头Last-Modified，因此会在请求中添加请求头If-Modified-Since。该值是之前Last-Modified中的值。服务端收到请求后，会根据If-Modified-Since中的值判断资源是否更新。如果值相等，则返回304状态码和空响应体，浏览器收到后通过缓存获取。如下图可以看到，如果不相等，会返回200的内容和状态码。Etag和If-None-MatchEtag是服务器响应请求时返回当前资源文件的唯一标识（由服务器生成）。只要资源发生变化，Etag就会重新生成。浏览器下次加载资源向服务器发送请求时，会将上次返回的Etag值放入Request头中的If-None-Match中，服务器只需要比对发送的If-None-Match即可通过客户端与自己服务器端资源的ETag是否一致，可以判断该资源相对于客户端是否发生了修改。如果值相等，则返回304状态码和空响应体，浏览器收到后通过缓存获取。如下图可以看到，如果不相等，会返回200的内容和状态码。注意：ETag和If-None-Match的优先级高于Last-Modified和If-Modified-Since，只有ETag和If-None-Match同时存在才会生效。应用部署设置规则知道了浏览器的缓存后，我们在常见的web开发中应该如何设置。现在大部分应用都是通过webpack打包的，打包生成的资源名都会带有hash值。以下是打包后的文件。我们可以遵循以下规则。index.html入口文件不强制强制缓存，而是设置为协商缓存。在线环境下js资源可以设置强缓存。因为每次打包后入口文件都会变化，协商缓存会失效，重新从服务器获取新的资源。对应的js资源有hash变化，所以如果有变化，会从服务器获取。结语浏览器的缓存策略，说的就是这些，快来学习，和测试小伙伴聊一聊。如果觉得这篇文章不错，不妨1.点个赞，让更多人看到这篇内容2.关注我，让我们长长久久3.关注公众号》有话要说在前端”，已经有很多原创文章，和开发工具，欢迎大家关注，尽快阅读我的文章
