更新js缓存办法
2012-07-28 11:27 Patrick.Lee 阅读(3621) 评论(0) 编辑 收藏 举报http://zhenggm.iteye.com/blog/680600
遇到的问题:
在访问量比较大的系统中,我们需要将一些静态的文件在客户端缓存,以减少下载的流量,从而加快客户端访问的速度。但是缓存会带来一个问题,就是如何在服务端更新完文件之后,客户端能够及时得到更新。
解决思路:
1. 在一个配置文件中维护js文件map;
2. 在页面中通过js map的key来动态加载js文件;
3. 在js文件做出变动之后,只要修改相应js的版本号
实例:
1. 在一个配置文件(config.js)中维护js文件map(注意:config.js是不缓存的,每次更新)
2. 在页面中通过js map的key来动态加载js文件;
3. 在js文件做出变动之后,只要修改相应js的版本号即可.这样由于链接不一样了,就会对这个变动的js进行重新下载。其他js由于链接不变,所以仍旧使用缓存中的js.
在访问量比较大的系统中,我们需要将一些静态的文件在客户端缓存,以减少下载的流量,从而加快客户端访问的速度。但是缓存会带来一个问题,就是如何在服务端更新完文件之后,客户端能够及时得到更新。
解决思路:
1. 在一个配置文件中维护js文件map;
2. 在页面中通过js map的key来动态加载js文件;
3. 在js文件做出变动之后,只要修改相应js的版本号
实例:
1. 在一个配置文件(config.js)中维护js文件map(注意:config.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文件;
- <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.