网站更新后客户端缓存问题

问题：

网站调整后，发现页面显示不正常，刷新清空缓存后才能显示正常。

研究：

可能存在本地缓存问题，虽然服务器修改了css或者js文件，但是浏览器仍然使用的是本地缓存的css

解决：

1.更新文件后更改css/js文件名

　　缓存是通过文件名标记缓存的内容的，在更新了网站的css或者js文件内容后，在更新了一下css或者js文件名就行了。

例如：

原文件名为：　　

<link rel="stylesheet" href="css/style.css" />

更新后 更改命名为：　　

<link rel="stylesheet" href="css/style_01.css" />

2.给css/js文件加个版本号：

 第一种方法修改css/js后改文件名确实麻烦，所以我们可以加载css/js语句中加入版本号（即css/js链接中？后面的内容）就可以了。如原先的HTML中的css调用语句如下：　

<link rel="stylesheet" href="css/style.css?v=201708" />

将css文件的版本号改成新的：

<link rel="stylesheet" href="css/style.css?v=201709" />

关于css/js文件后缀参数：

　　css文件后面的问号起不到实际作用，仅能当作后缀，如果用问号加参数的方法，可以添加版本号等信息，更新的同时可以刷新一下浏览器的缓存。例如：

<link rel="stylesheet" href="css/style.css?version=1.0.0" />
<script type="text/javascript" src="js/style.js?version=1.0.0"></script>

　　使用参数的两种作用：

　　　　客户端会缓存css/js文件，因此每次升级js/css文件后，改编版本号，客户端浏览器就会重新下载新的js/css文件，起到刷新缓存的作用。

　　　　脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区分。即上面代码对于文件来说等价于：

<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/style.js"></script>

但浏览器会认为它是该文件的某个版本!      第一种方法使用最多，也可能两种方法同时使用。

转载于:https://www.cnblogs.com/CooLLYP/p/7472304.html