技術前沿 看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’

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

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

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加載，先導入以下包：

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時的進度回調方法，傳回兩個參數，bytesLoaded與bytesTotal，若需要顯示進度條，則這個方法是必備的。如果緩存不存在，則bytesLoaded與bytesTotal會是從服務器端加載數據的值；
如果緩存已經存在，則該方法只調用一次，而且兩個回傳參數均是100
◆onReady,指加載完成後的回調方法，傳回一個UIComponent類型的參數data
◆代理器使用了餓漢單例模式，檢測module是否已經緩存在客戶端。
◆如果已經緩存在客戶端，則直接讀取
◆否則，從服務器端加載，顯示，再緩存到客戶端，打上版本。

◆加載SWF（非module），需導入以下包：

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一樣
◆唯一不同點，onReady方法的回傳參數爲一個ByteArray，需要自己進行包裝目前使用起來就是這樣。你可以使用SwfCacheProxy來緩存皮膚Style.swf，遊戲插件，圖片資源等等Swf數據。
在例子中，有個“加載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);
 }
}

細心點，你就會發現，moduleTwo.swf使用ModuleCacheProxy加載了兩次。嗯，這是爲了演示一下，如果在一個swf還未加載完畢，再將他加載一遍，就會被拒絕。如果你想一次性將一個SWF加載多次（也可以說Copy多個Swf），將會遭到拒絕，你可以一個一個慢慢加載，在 onReady方法裏面加載。或者根本可以不用使用加載，直接使用複製，如何複製，自己去google啦。
這樣可以避免一點，加載緩存時很卡。

轉載請註明:出自FlexHome原文鏈接:http://Flex.desizen.com/Flex-client-cache/