silverlight線程與基於事件驅動javascript引擎(實現軌跡回放功能)

來源:互聯網
上載者:User

案例背景:
    整個功能其實就是從資料庫取出資料,然後在介面上播放,簡單地說就是類似網上線上看視頻,聽音樂,只不過我取的是字串資料,而他們取的是流檔案資料。把整體資料分成十份,十個線程同時向資料庫取資料(並發提高速度)放在十個隊列中,另外一個線程從隊列中取資料拿出來到介面上播放,可以拖動播放進度,停止,暫停,重新播放,控制播放速度。恩,功能聽起來似乎很簡單,做起來也不是很難。但是後面發現的一些問題,以及順著這些問題往下挖掘,挖掘了一些我認為值得記住的東西。
關鍵東西:
    1. siliverlight 後台線程 BackgroundWorker m_GetReplayData= new BackgroundWorker();
2. 跨線程訪問介面控制項 ,this.Dispatcher.BeginInvoke( /訪問介面UI);
3. javascript 式的函數指標: var ShowSIngleLog = function(){} ;(在父頁面上)
4 .子頁面註冊父頁面的事件: var fatharWindow = window.opener; ;
fatharWindow .ShowSIngleLog =function(){//播放資料 showTrace()};
5.javascript引擎線程,介面渲染線程,瀏覽器事件觸發線程;
6.瀏覽器引擎是單線程,也就是所有東西都是同步的,不存在兩個線程同時跑
問題所在:
通過silverlight線程的迴圈來調用JS方法達到播放介面資料的效果,因為silverlight只能調用本頁面的JS方法,可是軌跡回放的頁面是首頁面彈出的一個子頁面,於是我利用首頁面的一個空的函數指標,子頁面註冊父頁面的事件來達到Silverlight調用子頁面方法目(上面提到的第3點)。經過我仔細的推敲和論證我確定沒問題,做完後的也沒什麼問題。本地測試的都是用上百條,上千條資料,問題不大,停止,暫停,拖動進度,問題都不大,就是父頁面介面有點卡,一開始我並沒有重視這個問題。到了測試那邊是2萬多條資料播放,播放5分鐘後主介面卡死了,軌跡回放頁面上的,停止,拖動進度,暫停,播放按鈕全部失效了。現象非常地詭異,我一度認為是測試的機器問題,最後發現是大資料量的問題。this.Dispatcher.BeginInvoke( /訪問介面UI)這個調用看似很簡單,很普通,但是有兩    個特點:
1.它是非同步,也就是調一下不一定馬上執行,先調不一定先執行,需要做同步控制;
2.這個方法要搶佔瀏覽器介面渲染線程,而該線程與javascript引擎線程是互斥的.
    2萬多資料,一開始我控制了播放速度,所以剛開始沒什麼問題,到後面很多資料都卡在這個方法上,導致不斷地搶佔瀏覽器介面渲染線程,導致首頁面非常卡,直到卡死為止。點擊首頁面,瀏覽器事件觸發線程要運行,但是這個時候介面渲染線程在跑,所以非常卡。
解決方案:
    this.Dispatcher.BeginInvoke( /訪問介面UI),很明是這個東西造成,那就找替代方法。原來資料隊列是放在silverlight上,我改成放在javascript 隊列上。播放資料不依賴銀光線程,利用setimeout (該方法在IE6下會記憶體泄露,所以一開始被我排斥)來定時播放資料。結果很漂亮,頁面很順暢,沒有了非同步問題,不用去控制讓資料同步播放,也比較簡單。
分析原因:
為什麼用silerlight來播放會很卡,但是setimeout來播不會卡,兩個都是連續播放的,而且setimeout在播放的時候,點擊頁面,頁面也能響應事件,這個問題我們要從事件驅動javascript引擎。頁面卡的原因上面已經說了,主要是想解釋一下setimeout播放為什麼不卡。瀏覽器中的JavaScript引擎是基於事件驅動的,這裡的事件可看作是瀏覽器派給它的各種任務,這些任務可以源自 JavaScript引擎當前執行的代碼塊,如調用setTimeout添加一個任務,也可來自瀏覽器核心的其它線程,如介面元素滑鼠點擊事件,定時觸發器時間到達通知,非同步請求狀態變更通知等.從代碼角度看來任務實體就是各種回呼函數,JavaScript引擎一直等待著任務隊列中任務的到來.由於單線程關係,這些任務得進行排隊,一個接著一個被引擎處理。所以在播放資料的時候,操作介面的是會被加到任務隊列中,會得到執行,自然使用者角度感受到整個頁面也不卡了。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.