快捷導(dǎo)航

silverlight線程與基于事件驅(qū)動(dòng)javascript引擎（實(shí)現(xiàn)軌跡回放功能）

更新時(shí)間：2011年08月09日 21:30:04 投稿：mdxy-dxy

前一段時(shí)間一直在重構(gòu)工作站軌跡回放功能,一開(kāi)始我覺(jué)得很簡(jiǎn)單,但是后面引發(fā)了一系列奇怪的問(wèn)題,讓我很疼,所以不得不寫(xiě)個(gè)總結(jié)加深記憶,

案例背景：
　　　　整個(gè)功能其實(shí)就是從數(shù)據(jù)庫(kù)取出數(shù)據(jù)，然后在界面上播放，簡(jiǎn)單地說(shuō)就是類(lèi)似網(wǎng)上在線看視頻，聽(tīng)音樂(lè)，只不過(guò)我取的是字符串?dāng)?shù)據(jù)，而他們?nèi)〉氖橇魑募?shù)據(jù)。把整體數(shù)據(jù)分成十份，十個(gè)線程同時(shí)向數(shù)據(jù)庫(kù)取數(shù)據(jù)（并發(fā)提高速度）放在十個(gè)隊(duì)列中，另外一個(gè)線程從隊(duì)列中取數(shù)據(jù)拿出來(lái)到界面上播放，可以拖動(dòng)播放進(jìn)度，停止，暫停，重新播放，控制播放速度。恩，功能聽(tīng)起來(lái)似乎很簡(jiǎn)單，做起來(lái)也不是很難。但是后面發(fā)現(xiàn)的一些問(wèn)題，以及順著這些問(wèn)題往下挖掘，挖掘了一些我認(rèn)為值得記住的東西。
關(guān)鍵東西：
　　　　1. siliverlight 后臺(tái)線程 BackgroundWorker m_GetReplayData= new BackgroundWorker();
2. 跨線程訪問(wèn)界面控件 ,this.Dispatcher.BeginInvoke( /訪問(wèn)界面UI）;
3. javascript 式的函數(shù)指針： var ShowSIngleLog = function(){} ;（在父頁(yè)面上）
4 .子頁(yè)面注冊(cè)父頁(yè)面的事件： var fatharWindow = window.opener; ;
fatharWindow .ShowSIngleLog =function(){//播放數(shù)據(jù) showTrace()};
5.javascript引擎線程,界面渲染線程,瀏覽器事件觸發(fā)線程；
6.瀏覽器引擎是單線程，也就是所有東西都是同步的，不存在兩個(gè)線程同時(shí)跑
問(wèn)題所在：
通過(guò)silverlight線程的循環(huán)來(lái)調(diào)用JS方法達(dá)到播放界面數(shù)據(jù)的效果，因?yàn)閟ilverlight只能調(diào)用本頁(yè)面的JS方法，可是軌跡回放的頁(yè)面是主頁(yè)面彈出的一個(gè)子頁(yè)面，于是我利用主頁(yè)面的一個(gè)空的函數(shù)指針，子頁(yè)面注冊(cè)父頁(yè)面的事件來(lái)達(dá)到Silverlight調(diào)用子頁(yè)面方法目（上面提到的第3點(diǎn)）。經(jīng)過(guò)我仔細(xì)的推敲和論證我確定沒(méi)問(wèn)題，做完后的也沒(méi)什么問(wèn)題。本地測(cè)試的都是用上百條，上千條數(shù)據(jù)，問(wèn)題不大，停止，暫停，拖動(dòng)進(jìn)度，問(wèn)題都不大，就是父頁(yè)面界面有點(diǎn)卡，一開(kāi)始我并沒(méi)有重視這個(gè)問(wèn)題。到了測(cè)試那邊是2萬(wàn)多條數(shù)據(jù)播放，播放5分鐘后主界面卡死了，軌跡回放頁(yè)面上的，停止，拖動(dòng)進(jìn)度，暫停，播放按鈕全部失效了。現(xiàn)象非常地詭異，我一度認(rèn)為是測(cè)試的機(jī)器問(wèn)題，最后發(fā)現(xiàn)是大數(shù)據(jù)量的問(wèn)題。this.Dispatcher.BeginInvoke( /訪問(wèn)界面UI）這個(gè)調(diào)用看似很簡(jiǎn)單，很普通，但是有兩　　　個(gè)特點(diǎn):
1.它是異步的，也就是調(diào)一下不一定馬上執(zhí)行，先調(diào)不一定先執(zhí)行，需要做同步控制；
2.這個(gè)方法要搶占瀏覽器界面渲染線程，而該線程與javascript引擎線程是互斥的.
　　　 2萬(wàn)多數(shù)據(jù)，一開(kāi)始我控制了播放速度，所以剛開(kāi)始沒(méi)什么問(wèn)題，到后面很多數(shù)據(jù)都卡在這個(gè)方法上，導(dǎo)致不斷地?fù)屨紴g覽器界面渲染線程，導(dǎo)致主頁(yè)面非?？?，直到卡死為止。點(diǎn)擊主頁(yè)面，瀏覽器事件觸發(fā)線程要運(yùn)行，但是這個(gè)時(shí)候界面渲染線程在跑，所以非?？?。
解決方案：
　　　 this.Dispatcher.BeginInvoke( /訪問(wèn)界面UI），很明是這個(gè)東西造成，那就找替代方法。原來(lái)數(shù)據(jù)隊(duì)列是放在silverlight上，我改成放在javascript 隊(duì)列上。播放數(shù)據(jù)不依賴(lài)銀光線程，利用setimeout （該方法在IE6下會(huì)內(nèi)存泄露，所以一開(kāi)始被我排斥）來(lái)定時(shí)播放數(shù)據(jù)。結(jié)果很漂亮，頁(yè)面很順暢，沒(méi)有了異步的問(wèn)題，不用去控制讓數(shù)據(jù)同步播放，也比較簡(jiǎn)單。
分析原因：
為什么用silerlight來(lái)播放會(huì)很卡，但是setimeout來(lái)播不會(huì)卡，兩個(gè)都是連續(xù)播放的，而且setimeout在播放的時(shí)候，點(diǎn)擊頁(yè)面，頁(yè)面也能響應(yīng)事件，這個(gè)問(wèn)題我們要從事件驅(qū)動(dòng)javascript引擎。頁(yè)面卡的原因上面已經(jīng)說(shuō)了，主要是想解釋一下setimeout播放為什么不卡。瀏覽器中的JavaScript引擎是基于事件驅(qū)動(dòng)的,這里的事件可看作是瀏覽器派給它的各種任務(wù),這些任務(wù)可以源自 JavaScript引擎當(dāng)前執(zhí)行的代碼塊,如調(diào)用setTimeout添加一個(gè)任務(wù),也可來(lái)自瀏覽器內(nèi)核的其它線程,如界面元素鼠標(biāo)點(diǎn)擊事件,定時(shí)觸發(fā)器時(shí)間到達(dá)通知,異步請(qǐng)求狀態(tài)變更通知等.從代碼角度看來(lái)任務(wù)實(shí)體就是各種回調(diào)函數(shù),JavaScript引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來(lái).由于單線程關(guān)系,這些任務(wù)得進(jìn)行排隊(duì),一個(gè)接著一個(gè)被引擎處理。所以在播放數(shù)據(jù)的時(shí)候，操作界面的是會(huì)被加到任務(wù)隊(duì)列中，會(huì)得到執(zhí)行，自然用戶角度感受到整個(gè)頁(yè)面也不卡了。