技术前沿 看Flex客户端缓存技术如何使用

开发 后端
本文向大家简单介绍一下Flex客户端缓存的概念,flash或者Flex客户端的缓存,并不是指浏览器的缓存,浏览器的缓存在一定时间后会过期。

本文和大家重点讨论一下Flex客户端缓存moduleswf的使用,Flex使用RSL技术,可以解决框架的缓存与共享,很大程度的解决了加载问题。

Flex客户端缓存moduleswf

flash或者Flex客户端的缓存,并不是指浏览器的缓存,浏览器的缓存在一定时间后会过期,先作此声明。
使用Flex或者flash开发出来的网站最大的问题就是swf文件过大,国内网速有限,导致加载时间过长,这样会丢失很多潜在的客户。

Flex使用RSL技术,可以解决框架的缓存与共享,很大程度的解决了加载问题。但是如果项目过大,还是会导致加载时间很长这个问题。我使用了SharedObject进行客户端的SWF与Module的缓存,并进行版本控制。在服务器端做一个配置文件,有Flex客户端缓存过数据,则进行版本控制,达到客户端数据与服务器端数据保持一样。
例子:
假设现在有个Application的项目,生成的Application.swf文件是2028K,客户端的下载速度是100k/s,则差不多需要使用20秒的时间。现在将Application中的部分源码抽出来,使用Module机制,变成Application.swf428K,Module1.swf1000K,Module2.swf600K。不使用缓存的话,完整的加载完Application还是需要差不多20秒时间,若使用缓存,将Module1.swf与Module2.swf缓存在客户端,则只需要加载Application.swf的428K,差不多4秒时间,加上Moduel的读取2秒时间,最多也就6-7秒时间。效率很明显。而且还可以缓存其他的乱七八糟的东西,例如皮肤.swf,图片资源.swf等等.如果有跳转页面的话,还可以将Application.swf也进行缓存。

问题:

如果遇到不允许Flex客户端缓存,则跳过缓存,无碍程序的加载和运行。
如果一个用户,多次的打开本网站,说明对本网站有了一定的兴趣,在多次被询问是否允许缓存后,点击允许的可能性也加大。
当用户能够清楚的了解到缓存的好处时,允许缓存,一.可以加速用户体验,二.可以降低服务器压力,三.可以降低服务器带宽的使用。
文章最后有一个Demo供下载测试使用,源代码暂时打包成SWC,未开放出来。
下面将解释一下如何使用WarmC.swc:
配置文件’Cache_config.xml’

  1. <dataiddataid="moduleOne"version="beta01"/> 
  2.  <dataiddataid="moduleTwo"version="beta01"/> 
  3.  <dataiddataid="mySwf"version="beta01"/> 


◆当然,配置文件的路径,和名字可以由你任取,但需要在版本控制时指定路径,下面将介绍如何启动版本控制
◆id属性,标记这个缓存的名字,将会在全局使用,包括缓存的SharedObject名称,以及版本控制,下面读取缓存时将会使用到这个id
◆version版本控制,随你起名称。但是为了确保不会与以前的版本混淆,推荐最好还是使用递增的版本名称
首先必须在缓存的使用之前先启动版本控制,需要导入以下包:

  1. importWarmC.Cache.LocationDataProxy; 

然后启动版本控制:

LocationDataProxy.getInstance().CacheReBuild(0.5);
CacheReBuild(size:int,configUrl:String)方法使用说明:
◆size参数,指定缓存的总大小,单位为兆(M),不填则默认为1M即运行到这个地方时,就会判断客户端的SharedObject允许缓存大小,再提示用户修改缓存最大值设置如果你需要缓存的数据较大,则可对应取下面的值
size<=0不提示,或者默认客户端的100Kb
01<=size<10缓存10Mb以内的数据
10<=size缓存无限大的数据
例如:你需要缓存的文件总大小为700K,你可以设置size=0.7,这样子,就会在启动版本控制的是很对用户进行询问,而且保证用户同意缓存以后不会再次询问
◆configUrl,是指配置文件XML地址,默认是在根目录'Cache_config.xml',必须指定,并且配置文件格式必须与Demo格式一致
◆当配置文件正确无误时,版本控制启动成功,会读取服务器端配置,与Flex客户端缓存进行版本比较。版本不同的话,将Flex客户端缓存删除。如果版本控制启动失败,会导致客户端的缓存与服务器端的缓存无法同步。


设置缓存人性化功能

LocationDataProxy.getInstance().Warm_Human(true);
Warm_Human(bool:Boolean)说明:
◆FlashPlayer的SharedObject,在使用超过客户端的设置大小后,就会提示用户,并征求其意见,是否同意网站的缓存
◆如果,在系统需要缓存多个数据时,而且用户拒绝了缓存,系统将会在每次需要写入SharedObject时,都进行询问是否允许缓存,这样的用户体验十分糟糕。
◆当设置Warm_Huma为true时,在第一次提示用户是否允许程序缓存改大小后,如果用户拒绝了,以后的缓存将不会再提示,也不会再在Flex客户端缓存,直到用户再次运行此程序(,虽然是有点烦人,但嫌麻烦,多数人不会在意那几M的空间,而点了允许)
◆false,不管用户是否拒绝,每次需要增大缓存区大小时,都会提示用户
◆不使用该方法,默认为true。所以这个方法很少用到。
确保版本控制启动成功后,可以进行module加载,先导入以下包:

  1. importWarmC.Cache.ModuleCacheProxy; 

加载module

  1. ModuleCacheProxy.getInstance().load("moduleOne","ModuleOne.swf",onProgress,onReady);  
  2. functiononProgress(bytesLoaded:uint,bytesTotal:uint):void{  
  3.  trace(">加载ModuleOne:"+bytesLoaded+"/"+bytesTotal);  
  4. }  
  5. functiononReady(data:Object):void{  
  6.  trace(">ModuleOne加载完成!");  
  7.  Application.application.addChild(dataasUIComponent);  
  8. }  

◆load(name:String,url:String,onProgress:Function,onReady: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),需导入以下包:

  1. importWarmC.Cache.SwfCacheProxy; 

加载SWF:

  1. SwfCacheProxy.getInstance().load("mySwf","test.swf",onProgress,onReady);  
  2. functiononProgress(bytesLoaded:uint,bytesTotal:uint):void{  
  3.  trace(">加载SWF:"+bytesLoaded+"/"+bytesTotal);  
  4. }  
  5. functiononReady(data:Object):void{  
  6.  trace(">SWF加载完成!");  
  7.  varload:Loader=newLoader()  
  8.  load.loadBytes(dataasByteArray);  
  9.  varuic:UIComponent=newUIComponent();  
  10.  uic.addChild(load);  
  11.  Application.application.addChild(uic);  

◆load(name:String,url:String,onProgress:Function,onReady:Function)说明:
◆属性作用与ModuleCacheProxy一样
◆唯一不同点,onReady方法的回传参数为一个ByteArray,需要自己进行包装目前使用起来就是这样。你可以使用SwfCacheProxy来缓存皮肤Style.swf,游戏插件,图片资源等等Swf数据。
在例子中,有个“加载Module2”:

  1. privatefunctionloadModule2():void{  
  2.  ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady);  
  3.  ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady);  
  4.  functiononProgress(bytesLoaded:uint,bytesTotal:uint):void{  
  5.   trace(">加载ModuleTwo:"+bytesLoaded+"/"+bytesTotal);  
  6.  }  
  7.  functiononReady(data:Object):void{  
  8.   trace(">ModuleTwo加载完成!");  
  9.  Application.application.addChild(dataasUIComponent);  
  10.  }  
  11. }  

细心点,你就会发现,moduleTwo.swf使用ModuleCacheProxy加载了两次。嗯,这是为了演示一下,如果在一个swf还未加载完毕,再将他加载一遍,就会被拒绝。如果你想一次性将一个SWF加载多次(也可以说Copy多个Swf),将会遭到拒绝,你可以一个一个慢慢加载,在onReady方法里面加载。或者根本可以不用使用加载,直接使用复制,如何复制,自己去google啦。
这样可以避免一点,加载缓存时很卡。

转载请注明:出自FlexHome原文链接:http://Flex.desizen.com/Flex-client-cache/

【编辑推荐】

  1. 解析FlexSDK4的十大变化
  2. Flex必须了解的那些事
  3. 在Flex中使用样式的五大方法
  4. FlexBuilder3.0与Eclipse3.4的完美结合
  5. Flex ComboBox和Datagrid组件用法指导
责任编辑:佚名 来源: csdn.net
相关推荐

2010-07-29 17:26:54

Flex富客户端技术

2010-08-09 09:09:43

Flex技术

2010-08-10 15:55:20

FlexHTML页面

2010-07-30 15:35:11

Flex结合

2010-08-10 15:38:32

Flex2.0

2010-08-09 12:59:15

Flex4beta

2010-06-30 16:52:23

UML数据建模

2010-07-28 16:16:57

Flex富客户端

2010-08-09 13:05:24

Flex4beta

2010-09-27 15:26:17

JVM for Lin

2010-08-11 12:50:04

Flex4

2010-05-19 11:07:49

TortoiseSVN

2014-08-08 15:36:39

Apdex

2009-07-21 13:03:06

桌面虚拟化虚拟PC数据中心

2010-08-06 14:58:42

FlexAIR

2015-06-03 09:27:05

JavaScript客户端检测技术

2010-08-10 13:04:27

FlexBuilder

2010-07-29 08:53:24

Flex客户端

2013-01-10 10:04:53

离线VDI客户端hypervis

2017-04-06 15:40:31

客户端数据存储技术
点赞
收藏

51CTO技术栈公众号