问题

在每次根据自己调整wordpress主题的细节时,总是会发现当前网站刷新之后修改没有生效,F12发现实际修改的js和css并没有被重新加载。

原因

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

在服务器通过设置.htaccess 可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问网站的时候,浏览器就可以从浏览器的缓存中获取css、js等,而不必从服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约的服务器流量。
实际在上线的网站调整,导入的js和css浏览器会缓存,这样在站点稍微调整之后,浏览器F5刷新仍然不能重新加载js和css,以前使用的ctrl+f5现在好像也不是很好使。

如何查看是否被缓存

浏览器F12直接看当前加载的的文件是否携带修改即可。当然也可以看加载状态。



from memory cache

解决方法

修改浏览器设置



Disable cache

修改文件名

虽然在很早之前就知道有这个问题的存在,所以每次在微调js或者css时... 就换个名字来欺骗浏览器,可以说是很笨拙,但是见效

为文件添加版本

<!-- 加版本号 -->
<script type="text/javascript" src="../mytest.js?v=1" ></script>
<link rel="stylesheet" href="../mytest.css?v=1"/>
<!-- 或者 加发布时间 -->
<script type="text/javascript" src="../mytest.js?t=20190806" ></script>
<link rel="stylesheet" href="../mytest.css?t=20190806"/>

这两个都可以通过后台控制,当前主题用的是版本控制,和主题的版本一致,通过wp的接口读style.css的版本。所以每次我调整样式,都需要改一下版本号...

添加随机数

这样不需要每次去改版本号了

计算文件hash

这样直接用hash来判断文件是不是有修改,调试的时候可能也方便


时间从来不语,却回答了所有问题