测试同学问我为什么每次让我清缓存（聊聊浏览器的缓存）前端浏览器缓存

前言最近一个好奇的测试同学问我，你们前端开发完成后，每次都让我们清缓存或者Ctrl+f5强制刷新，我能不能每次不用强制刷新，就能看到你们更新的内容呢。我说是可以做到的，我来跟你讲讲浏览器的缓存策略。我相信应该有不少的同学在工作中都会遇到这种情况，让你的测试同学清缓存等。
缓存浏览器缓存是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘或内存中显示文档，这样就可以加速页面的阅览。
浏览器缓存主要有两类：强缓存：cache-control，Expires 缓存协商：Last-modified ，Etag。
所有的缓存策略都是通过http header里设置的。

文章图片

强缓存当浏览器去获取资源的时候，不给服务器发请求，直接从缓存中读取。
Expires（过期时间）
Expires（缓存过期时间）是http1.0的产物，用来指定资源的到期时间，是服务端返回的时间点。

文章图片

从上面图我们可以看出在Expires: Thu, 20 Jan 2022 07:50:17 GMT在这之后会过期，请求改资源不会从缓存中获取。
缺点: 时间的判断是通过本地判读的，如果本地时间调大了，缓存可能会失效。
Cache-Control
Cache-Control是http1.1控制缓存的重要字段，如果Cache-Control在，它的优先级会比Expires高。常用的值如下

名称	描述
public	表示可以被客户端和代理服务器缓存
private	表示只可以被客户端缓存
max-age=30	单位为秒(s), 表示30s之内，从缓存中获取
s-maxage=30	根`max-age`一样，表示只在代理中生效
no-sotre	不缓存任何响应
no-cache	资源被缓存，但马上失效，下次请求会通过`协商缓存`验证资源是否过去
max-stale=30	在30s之内，缓存过期也从缓存中读取

协商缓存协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有两组配合使用：

Last-Modified和 If-Modified-Since
Etag和If-None-Match

Last-Modified和If-Modified-Since
浏览器在第一次访问资源的时候，服务器返回资源的同事，会在Response header中添加Last-Modified的key，表示该资源最后修改时间，浏览器接收后缓存文件和header，下次请求该资源，浏览器会检测到有Last-Modified这个请求头，于是在请求中会添加If-Modified-Since这个请求头，值就是之前Last-Modified中的值。服务器收到请求后，会根据If-Modified-Since中的值去判断资源是否更新。
如果值相等，就返回304状态码和空的响应体，浏览器收到后会通过缓存获取。可以看下图

文章图片

如果不相等，就返回内容和200的状态码。

文章图片

Etag和If-None-Match
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到Request header里的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、关注公众号「前端有话说」，里面已有多篇原创文章，和开发工具，欢迎各位的关注，第一时间阅读我的文章