技術(shù)前沿看Flex客戶端緩存技術(shù)如何使用

作者：eting1987 2010-07-29 09:08:20

本文向大家簡(jiǎn)單介紹一下Flex客戶端緩存的概念，flash或者Flex客戶端的緩存，并不是指瀏覽器的緩存，瀏覽器的緩存在一定時(shí)間后會(huì)過期。

本文和大家重點(diǎn)討論一下Flex客戶端緩存moduleswf的使用，F(xiàn)lex使用RSL技術(shù)，可以解決框架的緩存與共享，很大程度的解決了加載問題。

Flex客戶端緩存moduleswf

flash或者Flex客戶端的緩存，并不是指瀏覽器的緩存，瀏覽器的緩存在一定時(shí)間后會(huì)過期，先作此聲明。
使用Flex或者flash開發(fā)出來的網(wǎng)站最大的問題就是swf文件過大，國(guó)內(nèi)網(wǎng)速有限，導(dǎo)致加載時(shí)間過長(zhǎng)，這樣會(huì)丟失很多潛在的客戶。

Flex使用RSL技術(shù)，可以解決框架的緩存與共享，很大程度的解決了加載問題。但是如果項(xiàng)目過大，還是會(huì)導(dǎo)致加載時(shí)間很長(zhǎng)這個(gè)問題。我使用了SharedObject進(jìn)行客戶端的SWF與Module的緩存，并進(jìn)行版本控制。在服務(wù)器端做一個(gè)配置文件，有Flex客戶端緩存過數(shù)據(jù)，則進(jìn)行版本控制，達(dá)到客戶端數(shù)據(jù)與服務(wù)器端數(shù)據(jù)保持一樣。
例子:
假設(shè)現(xiàn)在有個(gè)Application的項(xiàng)目，生成的Application.swf文件是2028K，客戶端的下載速度是100k/s，則差不多需要使用20秒的時(shí)間。現(xiàn)在將Application中的部分源碼抽出來，使用Module機(jī)制，變成Application.swf428K，Module1.swf1000K，Module2.swf600K。不使用緩存的話，完整的加載完Application還是需要差不多20秒時(shí)間，若使用緩存，將Module1.swf與Module2.swf緩存在客戶端，則只需要加載Application.swf的428K，差不多4秒時(shí)間，加上Moduel的讀取2秒時(shí)間，最多也就6-7秒時(shí)間。效率很明顯。而且還可以緩存其他的亂七八糟的東西，例如皮膚.swf，圖片資源.swf等等.如果有跳轉(zhuǎn)頁面的話，還可以將Application.swf也進(jìn)行緩存。

問題：

如果遇到不允許Flex客戶端緩存，則跳過緩存，無礙程序的加載和運(yùn)行。
如果一個(gè)用戶，多次的打開本網(wǎng)站，說明對(duì)本網(wǎng)站有了一定的興趣，在多次被詢問是否允許緩存后，點(diǎn)擊允許的可能性也加大。
當(dāng)用戶能夠清楚的了解到緩存的好處時(shí)，允許緩存，一.可以加速用戶體驗(yàn)，二.可以降低服務(wù)器壓力，三.可以降低服務(wù)器帶寬的使用。
文章最后有一個(gè)Demo供下載測(cè)試使用，源代碼暫時(shí)打包成SWC，未開放出來。
下面將解釋一下如何使用WarmC.swc：
配置文件’Cache_config.xml’

<dataiddataid="moduleOne"version="beta01"/> 
 <dataiddataid="moduleTwo"version="beta01"/> 
 <dataiddataid="mySwf"version="beta01"/>

◆當(dāng)然，配置文件的路徑，和名字可以由你任取，但需要在版本控制時(shí)指定路徑，下面將介紹如何啟動(dòng)版本控制
◆id屬性，標(biāo)記這個(gè)緩存的名字，將會(huì)在全局使用，包括緩存的SharedObject名稱，以及版本控制,下面讀取緩存時(shí)將會(huì)使用到這個(gè)id
◆version版本控制，隨你起名稱。但是為了確保不會(huì)與以前的版本混淆，推薦最好還是使用遞增的版本名稱
首先必須在緩存的使用之前先啟動(dòng)版本控制，需要導(dǎo)入以下包：

importWarmC.Cache.LocationDataProxy;

然后啟動(dòng)版本控制：

LocationDataProxy.getInstance().CacheReBuild(0.5);
CacheReBuild(size:int,configUrl:String)方法使用說明:
◆size參數(shù),指定緩存的總大小，單位為兆（M），不填則默認(rèn)為1M即運(yùn)行到這個(gè)地方時(shí)，就會(huì)判斷客戶端的SharedObject允許緩存大小，再提示用戶修改緩存最大值設(shè)置如果你需要緩存的數(shù)據(jù)較大，則可對(duì)應(yīng)取下面的值
size<=0不提示，或者默認(rèn)客戶端的100Kb
01<=size<10緩存10Mb以內(nèi)的數(shù)據(jù)
10<=size緩存無限大的數(shù)據(jù)
例如：你需要緩存的文件總大小為700K，你可以設(shè)置size=0.7,這樣子，就會(huì)在啟動(dòng)版本控制的是很對(duì)用戶進(jìn)行詢問，而且保證用戶同意緩存以后不會(huì)再次詢問
◆configUrl,是指配置文件XML地址，默認(rèn)是在根目錄'Cache_config.xml'，必須指定，并且配置文件格式必須與Demo格式一致
◆當(dāng)配置文件正確無誤時(shí)，版本控制啟動(dòng)成功，會(huì)讀取服務(wù)器端配置，與Flex客戶端緩存進(jìn)行版本比較。版本不同的話，將Flex客戶端緩存刪除。如果版本控制啟動(dòng)失敗，會(huì)導(dǎo)致客戶端的緩存與服務(wù)器端的緩存無法同步。

設(shè)置緩存人性化功能

LocationDataProxy.getInstance().Warm_Human(true);
Warm_Human（bool:Boolean）說明:
◆FlashPlayer的SharedObject，在使用超過客戶端的設(shè)置大小后，就會(huì)提示用戶，并征求其意見，是否同意網(wǎng)站的緩存
◆如果，在系統(tǒng)需要緩存多個(gè)數(shù)據(jù)時(shí)，而且用戶拒絕了緩存，系統(tǒng)將會(huì)在每次需要寫入SharedObject時(shí)，都進(jìn)行詢問是否允許緩存，這樣的用戶體驗(yàn)十分糟糕。
◆當(dāng)設(shè)置Warm_Huma為true時(shí)，在第一次提示用戶是否允許程序緩存改大小后，如果用戶拒絕了，以后的緩存將不會(huì)再提示，也不會(huì)再在Flex客戶端緩存，直到用戶再次運(yùn)行此程序（，雖然是有點(diǎn)煩人，但嫌麻煩，多數(shù)人不會(huì)在意那幾M的空間，而點(diǎn)了允許）
◆false，不管用戶是否拒絕，每次需要增大緩存區(qū)大小時(shí)，都會(huì)提示用戶
◆不使用該方法，默認(rèn)為true。所以這個(gè)方法很少用到。
確保版本控制啟動(dòng)成功后，可以進(jìn)行module加載，先導(dǎo)入以下包：

importWarmC.Cache.ModuleCacheProxy;

加載module

ModuleCacheProxy.getInstance().load("moduleOne","ModuleOne.swf",onProgress,onReady);  
functiononProgress(bytesLoaded:uint,bytesTotal:uint):void{  
 trace(">加載ModuleOne:"+bytesLoaded+"/"+bytesTotal);  
}  
functiononReady(data:Object):void{  
 trace(">ModuleOne加載完成!");  
 Application.application.addChild(dataasUIComponent);  
}

◆load(name:String,url:String,onProgress:Function,onReady:Function)說明:
◆name,指的是Module在配置文件Cache_config文件中的ID，此處必須與配置文件一致。用于版本控制，以及
客戶端的緩存文件名，通過name獲取SharedObject
◆url,指的是Module的Swf文件路徑，Demo的Module文件均在根目錄，所以直接指定名稱
◆onProgress,指加載Module時(shí)的進(jìn)度回調(diào)方法，傳回兩個(gè)參數(shù)，bytesLoaded與bytesTotal，若需要顯示進(jìn)度條，則這個(gè)方法是必備的。如果緩存不存在，則bytesLoaded與bytesTotal會(huì)是從服務(wù)器端加載數(shù)據(jù)的值；
如果緩存已經(jīng)存在，則該方法只調(diào)用一次，而且兩個(gè)回傳參數(shù)均是100
◆onReady,指加載完成后的回調(diào)方法，傳回一個(gè)UIComponent類型的參數(shù)data
◆代理器使用了餓漢單例模式，檢測(cè)module是否已經(jīng)緩存在客戶端。
◆如果已經(jīng)緩存在客戶端，則直接讀取
◆否則，從服務(wù)器端加載，顯示，再緩存到客戶端，打上版本。

◆加載SWF（非module），需導(dǎo)入以下包：

importWarmC.Cache.SwfCacheProxy;

加載SWF:

SwfCacheProxy.getInstance().load("mySwf","test.swf",onProgress,onReady);  
functiononProgress(bytesLoaded:uint,bytesTotal:uint):void{  
 trace(">加載SWF:"+bytesLoaded+"/"+bytesTotal);  
}  
functiononReady(data:Object):void{  
 trace(">SWF加載完成!");  
 varload:Loader=newLoader()  
 load.loadBytes(dataasByteArray);  
 varuic:UIComponent=newUIComponent();  
 uic.addChild(load);  
 Application.application.addChild(uic);  
}

◆load(name:String,url:String,onProgress:Function,onReady:Function)說明:
◆屬性作用與ModuleCacheProxy一樣
◆唯一不同點(diǎn)，onReady方法的回傳參數(shù)為一個(gè)ByteArray，需要自己進(jìn)行包裝目前使用起來就是這樣。你可以使用SwfCacheProxy來緩存皮膚Style.swf，游戲插件，圖片資源等等Swf數(shù)據(jù)。
在例子中，有個(gè)“加載Module2”:

privatefunctionloadModule2():void{  
 ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady);  
 ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady);  
 functiononProgress(bytesLoaded:uint,bytesTotal:uint):void{  
  trace(">加載ModuleTwo:"+bytesLoaded+"/"+bytesTotal);  
 }  
 functiononReady(data:Object):void{  
  trace(">ModuleTwo加載完成!");  
 Application.application.addChild(dataasUIComponent);  
 }  
}

細(xì)心點(diǎn)，你就會(huì)發(fā)現(xiàn)，moduleTwo.swf使用ModuleCacheProxy加載了兩次。嗯，這是為了演示一下，如果在一個(gè)swf還未加載完畢，再將他加載一遍，就會(huì)被拒絕。如果你想一次性將一個(gè)SWF加載多次（也可以說Copy多個(gè)Swf），將會(huì)遭到拒絕，你可以一個(gè)一個(gè)慢慢加載，在onReady方法里面加載。或者根本可以不用使用加載，直接使用復(fù)制，如何復(fù)制，自己去google啦。
這樣可以避免一點(diǎn)，加載緩存時(shí)很卡。

轉(zhuǎn)載請(qǐng)注明:出自FlexHome原文鏈接:http://Flex.desizen.com/Flex-client-cache/

【編輯推薦】