问题:
网站调整后,发现页面显示不正常,刷新清空缓存后才能显示正常。
研究:
可能存在本地缓存问题,虽然服务器修改了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>
但浏览器会认为它是该文件的某个版本! 第一种方法使用最多,也可能两种方法同时使用。