浏览器缓存问题

浏览器缓存问题

1. 概念

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

2. 问题

项目代码有更新时，因html文件名不会改变，页面会使用缓存而不会重新加载，造成显示未更新或页面故障。

3. 解决方案

3.1 nginx禁用缓存配置(推荐)

禁用全部缓存，修改nginx.conf文件，增加如下配置:

add_header Cache-Control no-cache;

禁用部分后缀文件的缓存，其他文件后缀依然会缓存，如.mp4等

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css)$ {
    add_header Cache-Control no-store;
}

因为不需要修改代码，且配置简单，推荐使用该方法

3.2 在html的head中添加meta

页面head中添加如下标签：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

在我的环境中，添加如上标签后，浏览器仍然会缓存，无法使用该方案。

3.3 后端设置get请求的response请求头

response.setDateHeader("Expries", -1);
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");

对于前后端分离的网站来说，该方案无法使用。对于不区分前后端的网站可以考虑。

3.4 使用js向url添加随机参数或版本号

浏览器根据url进行缓存，在url中添加随机数后，每次刷新都会生成不同的url，所以可以解决缓存问题。

if (!window.name) {
    location.href += "?random=" + Date.now();
    window.name = "reloaded";
}

向url中添加版本号的思路是：每发布一个版本在url后面增加该版本号，浏览器就会请求新的版本。

3.5 在浏览器中设置禁用缓存或清除当前缓存

F12打开控制台—>Network—->Disable cache 打钩

更多工具选项 或 ctrl+shift+delete 或 ctrl+f5—-> 清除浏览数据

参考资料

1. 浏览器缓存, https://baike.baidu.com/item/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98
2. nginx缓存启用和禁用, https://www.jianshu.com/p/8ce13a430929
3. 控制浏览器禁止缓存, https://www.cnblogs.com/leeke98/p/11065734.html