Flex缓存客户端


  flex或者flash客户端的缓存,并不是指浏览器的缓存,浏览器的缓存在一定时间后会过期。
  使用flex或者flash开发出来的网站最大的问题就是swf文件过大,国内网速有限,导致加载时间过长,这样会丢失很多潜在的客户。
  flex使用RSL技术,可以解决框架的缓存与共享,很大程度的解决了加载问题。但是如果项目过大,还是会导致加载时间很长这个问题。我使用了 SharedObject进行客户端的SWF与Module的缓存,并进行版本控制。在服务器端做一个配置文件,客户端若有缓存过数据,则进行版本控制, 达到客户端数据与服务器端数据保持一样。  假设现在有个Application的项目,生成的Application.swf文件是2028K,客户端的下载速度是100k/s,则差不多需要使用 20秒的时间。现在将Application中的部分源码抽出来,使用Module机制,变成Application.swf 428K,Module1.swf 1000K,Module2.swf 600K。不使用缓存的话,完整的加载完Application还是需要差不多20秒时间,若使用缓存,将Module1.swf与 Module2.swf缓存在客户端,则只需要加载Application.swf的428K,差不多4秒时间,加上Moduel的读取2秒时间,最多也 就6-7秒时间。效率很明显。而且还可以缓存其他的乱七八糟的东西,例如皮肤.swf,图片资源.swf等等.如果有跳转页面的话,还可以将 Application.swf也进行缓存。
  问题:
  如果遇到客户端不允许缓存,则跳过缓存,无碍程序的加载和运行。
  如果一个用户,多次的打开本网站,说明对本网站有了一定的兴趣,在多次被询问是否允许缓存后,点击允许的可能性也加 大。
  当用户能够清楚的了解到缓存的好处时,允许缓存,一.可以加速用户体验,二.可以降低服务器压力,三.可以降低服务器带宽的使用。
  文章最后有一个Demo供下载测试使用,源代码暂时打包成SWC,未开放出来。
  下面将解释一下如何使用WarmC.swc:
  配置文件Cache_config.xml
  *当然,配置文件的路径,和名字可以由你任取,但需要在版本控制时指定路径,下面将介绍如何启动版本控制
  *id属性,标记这个缓存的名字,将会在全局使用,包括缓存的SharedObject名称,以及版本控制,下面读取缓存时将会使用到这个id
  *version版本控制,随你起名称。但是为了确保不会与以前的版本混淆,推荐最好还是使用递增的版本名称
  首先必须在缓存的使用之前先启动版本控制,需要导入以下包: 然后启动版本控制:  * size参数,指定缓存的总大小,单位为兆(M),不填则默认为1M即运行到这个地方时,就会判断客户端的SharedObject 允许缓存大小,再提示用户修改缓存最大值设置如果你需要缓存的数据较大,则可对应取下面的值
  size加载,先导入以下包: 加载module ModuleCacheProxy.getInstance().load("moduleOne","M oduleOne.swf",onProgress,onReady);
  function onProgress(bytesLoaded:uint,bytesTotal:uint):void{
  trace(">加载ModuleOne:"+bytesLoaded+"/"+bytesTotal);
  }
  function onReady(data:Object):void{
  trace(">ModuleOne 加载完成!");
  Application.application.addChild(data as UIComponent);
  }
  * load(name:String,url:String,onProgress:Function,on Ready:Function)说明:
  * name,指的是Module在配置文件Cache_config文件中的ID,此处必须与配置文件一致。用于版本控制,以及
  客户端的缓存文件名,通过name获取SharedObject
  * url,指的是Module的Swf文件路径,Demo的Module文件均在根目录,所以直接指定名称
  * onProgress,指加载Module时的进度回调方法,传回两个参数,bytesLoaded与bytesTotal,若需要显示进度条,则这个方法是必备的。如果缓存不存在,则bytesLoaded与bytesTotal会是从服务器端加载数据的值;
  如果缓存已经存在,则该方法只调用一次,而且两个回传参数均是100
  * onReady,指加载完成后的回调方法,传回一个UIComponent类型的参数data
  * 代理器使用了饿汉单例模式,检测module是否已经缓存在客户端。
  * 如果已经缓存在客户端,则直接读取
  * 否则,从服务器端加载,显示,再缓存到客户端,打上版本。
  加载SWF(非module),需导入以下包: 加载SWF: SwfCacheProxy.getInstance().load("mySwf","test.swf ",onProgress,onReady);
  function onProgress(bytesLoaded:uint,bytesTotal:uint):void{
  trace(">加载SWF:"+bytesLoaded+"/"+bytesTotal);
  }
  function onReady(data:Object):void{
  trace(">SWF 加载完成!");
  var load:Loader = new Loader()
  load.loadBytes( data as ByteArray );
  var uic:UIComponent=new UIComponent();
  uic.addChild(load); 
  Application.application.addChild(uic);
  }
  *属性作用与ModuleCacheProxy一样
  *唯一不同点,onReady方法的回传参数为一个ByteArray,需要自己进行包装目前使用起来就是这样。你可以使用SwfCacheProxy来缓存皮肤Style.swf,游戏插件,图片资源等等Swf数据。
  在例子中,有个"加载Module 2": private function loadModule2():void{
  ModuleCacheProxy.getInstance().load("moduleTwo","M oduleTwo.swf",onProgress,onReady);
  ModuleCacheProxy.getInstance().load("moduleTwo","M oduleTwo.swf",onProgress,onReady);
  function onProgress(bytesLoaded:uint,bytesTotal:uint):void{
  trace(">加载ModuleTwo:"+bytesLoaded+"/"+bytesTotal);
  }
  function onReady(data:Object):void{
  trace(">ModuleTwo 加载完成!");
  Application.application.addChild(data as UIComponent);
  }
  }
  原文地址:http://lib.airia.cn/2010/1119/FLEX_cache.html

你可能感兴趣的:(Flex)