js缓存更新方案
2011-03-04 16:48
169 查看
js缓存更新方案
文章分类:Web前端遇到的问题:
在访问量比较大的系统中,我们需要将一些静态的文件在客户端缓存,以减少下载的流量,从而加快客户端访问的速度。但是缓存会带来一个问题,就是如何在服务端更新完文件之后,客户端能够及时得到更新。
解决思路:
1. 在一个配置文件中维护js文件map;
2. 在页面中通过js map的key来动态加载js文件;
3. 在js文件做出变动之后,只要修改相应js的版本号
实例:
1. 在一个配置文件(config.js)中维护js文件map(注意:config.js是不缓存的,每次更新)
Js代码
//js Map
var JSHash = {
index: [{url:"http://xxxx.js", version: "1.0"}],
edit: [{url:"http://xxxx.js", version: "2.0"}]
}
//js Map var JSHash = { index: [{url:"http://xxxx.js", version: "1.0"}], edit: [{url:"http://xxxx.js", version: "2.0"}] }
2. 在页面中通过js map的key来动态加载js文件;
Html代码
<script src=config.js></script>
<script>
loadJS("edit");
</script>
//根据传入的key,动态生成js加载语句
function loadJS(sKey) {
var node = JSHash[sKey];
for(var i =0;i < node.length; i ++) {
document.writeln('<script src="'+node[i].url+'?version='+node[i].version+'"><//script>');
}
}
//-->
</script>
<script src=config.js></script> <script> loadJS("edit"); </script> //根据传入的key,动态生成js加载语句 function loadJS(sKey) { var node = JSHash[sKey]; for(var i =0;i < node.length; i ++) { document.writeln('<script src="'+node[i].url+'?version='+node[i].version+'"><//script>'); } } //--> </script>
3. 在js文件做出变动之后,只要修改相应js的版本号即可.这样由于链接不一样了,就会对这个变动的js进行重新下载。其他js由于链接不变,所以仍旧使用缓存中的js.
相关文章推荐
- js缓存更新方案
- 处理客户端缓存无法及时更新js和css文件的方法
- 缓存查询列表并提供更新处理方案
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- html5如何及时更新缓存文件(js、css或图片)
- iOS 动态更新方案对比:JSPatch vs React Native
- 浏览器缓存_后台更新js,浏览器中更新后的js代码不显示
- dede 修复更新联动缓存 不更新联动js的bug
- 关于更新发布CSS和JS文件的缓存问题
- 关于更新发布CSS和JS文件的缓存问题
- 【前端开发必备】CSS和JS缓存带来的更新问题
- js的动态加载、缓存、更新以及复用(四)
- js、css 更新缓存
- java web项目发版js或css缓存问题解决方案
- 处理ios webview 更新缓存本地css、js后webview缓存无法更新的问题
- html5如何及时更新缓存文件(js、css或图片)
- js的动态加载、缓存、更新以及复用
- 解决WEB对js、css缓存问题的一种可行方案
- js,css文件更新之后,浏览器端还有缓存,久久不能消除