无需清除浏览器缓存,刷新即可查看最新发布代码

68 阅读1分钟

背景

前端每次发布完成,测试同学都需要清除浏览器缓存,然后重新打开页面,用户体验各方面都比较差。

分析问题

1.这个肯定和浏览器缓存有关,就是什么时候使用缓存什么时候不使用。

image.png 打开一下自己开发的页面,登录后的主页

image.png

区别:接着看了一下登录页,不同的打开方式,发现有些能及时更新,有些无法及时更新。
能及时更新的:这个是后端返回的,类似于接口调用 image.png 不能及时更新:ngxin直接返回

image.png

发现问题

返回头部多了一个cache-Control: no-cache,这应该与nginx缓存有关了。

查阅资料

mdn链接: developer.mozilla.org/en-US/docs/…

336cf9791ebd579d1be3be54ee379d69.png 每次都会去服务器那边校验一下文件有没有改变,没有改变就是304。
那是怎么判断有没有改的,根据etag,相关链接 developer.mozilla.org/en-US/docs/…

解决问题

在nginx中配置如下:

1685160169.png 浏览器查看

1685160485.png 发现没有cache-Control,这时候需要关闭浏览器,重新打开一下。

image.png

编辑一个html

image.png 查看返回的html

image.png

image.png 接着删除相关的html

image.png

然后再次刷新

image.png

总结

重温了一下http的缓存机制,当然还有缓存过期时间,什么情况使用强缓存,什么情况使用协商缓存等问题,可以进一步探索。
相关链接:www.ipcpu.com/2019/09/ngi…