天天看點

flex 用戶端緩存 module swf

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’

<data id="moduleOne"
 version="beta01"
/>

<data id="moduleTwo"
 version="beta01"
/>

<data id="mySwf"
 version="beta01"
/>



	
	      

*當然,配置檔案的路徑,和名字可以由你任取,但需要在版本控制時指定路徑,下面将介紹如何啟動版本控制

*id屬性,标記這個緩存的名字,将會在全局使用,包括緩存的SharedObject名稱,以及版本控制,下面讀取緩存時将會使用到這個id

*version版本控制,随你起名稱。但是為了確定不會與以前的版本混淆,推薦最好還是使用遞增的版本名稱

首先必須在緩存的使用之前先啟動版本控制,需要導入以下包:

然後啟動版本控制:

CacheReBuild(size:int,configUrl:String)方法使用說明:

* size參數,指定緩存的總大小,機關為兆(M),不填則預設為1M即運作到這個地方時,就會判斷用戶端的SharedObject 允許緩存大小,再提示使用者修改緩存最大值設定如果你需要緩存的資料較大,則可對應取下面的值

size<=0 不提示,或者預設用戶端的100Kb

0<1 緩存1Mb以内的資料

1<=size<10 緩存10Mb以内的資料

10<=size 緩存無限大的資料

例如:你需要緩存的檔案總大小為700K,你可以設定size=0.7,這樣子,就會在啟動版本控制的是很對使用者進行詢問,而且保證使用者同意緩存以後不會再次詢問

* configUrl,是指配置檔案XML位址,預設是在根目錄'Cache_config.xml',必須指定,并且配置檔案格式必須與Demo格式一緻

* 當配置檔案正确無誤時,版本控制啟動成功,會讀取伺服器端配置,與用戶端緩存進行版本比較。版本不同的話,将用戶端緩存删除。如果版本控制啟動失敗,會導緻用戶端的緩存與伺服器端的緩存無法同步。

設定緩存人性化功能

Warm_Human(bool:Boolean)說明:

* FlashPlayer的SharedObject,在使用超過用戶端的設定大小後,就會提示使用者,并征求其意見,是否同意網站的緩存

* 如果,在系統需要緩存多個資料時,而且使用者拒絕了緩存,系統将會在每次需要寫入SharedObject時,都進行詢問是否允許緩存,這樣的使用者體驗十分糟糕。

*當設定Warm_Huma為true時,在第一次提示使用者是否允許程式緩存改大小後,如果使用者拒絕了,以後的緩存将不會再提示,也不會再在用戶端緩存,直到使用者再次運作此程式(

flex 用戶端緩存 module swf

,雖然是有點煩人,但嫌麻煩,多數人不會在意那幾M的空間,而點了允許)

* false,不管使用者是否拒絕,每次需要增大緩存區大小時,都會提示使用者

* 不使用該方法,預設為true。是以這個方法很少用到。

確定版本控制啟動成功後,可以進行module加載,先導入以下包:

加載module

ModuleCacheProxy.getInstance().load("moduleOne","ModuleOne.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,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),需導入以下包:

加載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);
}
      

* load(name:String,url:String,onProgress:Function,onReady:Function)說明:

*屬性作用與ModuleCacheProxy一樣

*唯一不同點,onReady方法的回傳參數為一個ByteArray,需要自己進行包裝目前使用起來就是這樣。你可以使用SwfCacheProxy來緩存皮膚Style.swf,遊戲插件,圖檔資源等等Swf資料。

在例子中,有個“加載Module 2”:

private function loadModule2():void{
	ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady);
	ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.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);
	}
}
      

細心點,你就會發現,moduleTwo.swf使用ModuleCacheProxy加載了 兩次。嗯,這是為了示範一下,如果在一個swf還未加載完畢,再将他加載一遍,就會被拒絕。如果你想一次性将一個SWF加載多次(也可以說Copy多個 Swf),将會遭到拒絕,你可以一個一個慢慢加載,在onReady方法裡面加載。或者根本可以不用使用加載,直接使用複制,如何複制,自己去 google啦。

這樣可以避免一點,加載緩存時很卡。

flex 用戶端緩存 module swf

另外,做人得厚道點。别什麼東西都往人家C槽上面塞。

flex 用戶端緩存 module swf

羅嗦了這麼多,看Demo吧。flex 用戶端緩存 module swf 如果發現什麼Bug的話,歡迎留言…

繼續閱讀