欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 网站技巧 > 防止浏览器缓存css js等静态文件的方法【荐】
这篇文章主要为大家详细介绍了防止浏览器缓存css js等静态文件的方法【荐】,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

我们在进行网站开发的过程中经常需要测试相关文件和数据,但是浏览器经常会缓存我们的CSS文件和JS文件,这就造成了我们的一些更改无法及时显示,造成调试困难,因此很有必要禁用浏览器的缓存。

比如我们有一个html 文件, test.html 在 1.0版本中。可能是这样

<script src="common.js"></script>

修改后  v1.1版本:

<script src="common.js"></script>

<script src="foo.js"></script>

新增加了一个foo.js  同时,也改动了common.js , 在common.js 中定义了新的类,并在foo.js 中使用了common.js. 

在这种情况下如果以前用户浏览过 1.0版本的 html 文件,那么他的浏览器自动缓存了 common.js

当他浏览新版本的时候,因为使用的是 v1.1的 foo.js 和 v1.0的 common.js ,这样将导致脚本出错。

还有用户经常喜欢开启DNS云加速等加速节点,也是会造成修改不能及时响应的问题,这里361源码就不做重点介绍,今天我们给大家着重介绍的是防止浏览器缓存css js等静态文件的方法

解决方法一:

在html头部增加如下代码

<meta http-equiv="expires" content="0">  
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">

但是有的必加偏门的浏览器,或者一些手机的浏览器压根就不响应这些HEAD控制代码,因此这种方法也可能失效。

我们来尝试

第二种方法:添加随机数

因为css,js 是通过 <script src=....> 这种方式加载的,所以随机数是个好办法。

// 方法一:
document.write( " <script src='test.js?rnd= " + Math.random() + " '></s " + " cript> " )

// 方法二:

var  js = document.createElement( " script " )
js.src = " test.js " + Math.random()
document.body.appendChild(js)

但是,如果采用随机数的话, js文件将永远得不到缓存,每次都必须重新从服务器加载,即使没有任何更改。

大家如果经常上国外网站的话,可以看到他们通常采用这样的方式来解决:

<script src="test.js?ver=113"></script>

其中 ver=113 的 113就是版本号,一般都是采用 CVS 或其他工具生成的开发版本号。

这样真正做到了应该缓存的时候缓存静态文件,当版本有更新的时候从获取最新的版本,并更新缓存。

对于图像 <img src="test.jps?ver=在CVS的版本号"> 来有效利用和更新缓存.

这样的方法你学会了吗?

以上就是防止浏览器缓存css js等静态文件的方法【荐】的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css JS 浏览器 浏览器缓存 静态文件缓存

上一篇Dedecms创建栏目图文介绍 织梦CMS栏目怎么样创建实例

下一篇腾讯云主机无法打开宝塔面板的解决方法—放行安全组教程

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在