由于经常魔改主题,就会发现如果之前浏览器已经缓存了js/css等文件
当服务器中的js/css文件更新了,客户端直接访问是不会更新缓存的,就会导致页面显示不正常
需要用户进行Ctrl+F5强制刷新才能正常访问,这样显然是不合理的

经研究发现两种解决办法:

方法1 更新文件后更改引用的文件名

缓存是通过文件名标记缓存的内容的,如果我们网站更新了js/css文件后,直接在更换引用文件名即可
例如:原先调用语句是如下样式

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

直接更改引用的文件名即可

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

方法2 给css/js等文件加个版本号

如果我们每次更新js/css文件后还要修改文件名就有点麻烦了,更为方便的方法就是在引用js/css的结尾处加入版本号即可
例如:原先调用语句是如下样式

<link rel="stylesheet" href="customs.css?v=1.0" />

更改css文件的版本号为1.1

<link rel="stylesheet" href="customs.css?v=1.1" />

参数说明

1.js/css文件后的问号是不起任何作用的,仅能当做后缀使用的,所以可以用问号加入版本号等信息,更新文件版本的同时也可以刷新浏览器的缓存,很是方便。
2.问号后面不一定是版本号,可以根据自己的喜好改成任何字符都行,如时间(?20171209),序号(?123456)等等。
3.加上版本号的脚本实际上并不存在,由服务器动态生成,仅仅是区别文件而已。

<link rel="stylesheet" href="customs.css?v=1.1" />
# 这段代码对于文件来说等价于
<link rel="stylesheet" href="customs.css" />

但是浏览器就会认为它是这个文件的某一个版本

PS:两种方法达到的效果是一样的,可以根据自己的喜好选择,也可以混合使用。