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時,在第一次提示使用者是否允許程式緩存改大小後,如果使用者拒絕了,以後的緩存将不會再提示,也不會再在用戶端緩存,直到使用者再次運作此程式(
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLulmcndWai9lbvNWavw1cllGbp12cvw1cldWYtl2LcNXZkVHbj5WatA3dvwVbvNmLuVmepNXZk5CelxmZvw1LcpDc0RHaiojIsJye.gif)
,雖然是有點煩人,但嫌麻煩,多數人不會在意那幾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啦。
這樣可以避免一點,加載緩存時很卡。
另外,做人得厚道點。别什麼東西都往人家C槽上面塞。
羅嗦了這麼多,看Demo吧。flex 用戶端緩存 module swf 如果發現什麼Bug的話,歡迎留言…