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

• 2022 年 1 月 21 日
• 笔记
• 浏览器

前言

最近一个好奇的测试同学问我，你们前端开发完成后，每次都让我们清缓存或者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高。常用的值如下

协商缓存

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

• 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、关注公众号“前端有话说”，里面已有多篇原创文章，和开发工具，欢迎各位的关注，第一时间阅读我的文章