HTML5之Worker Thread

傳統網頁中嵌入的JSP語言都是執行在UI的上下文中，一般來說這種JSP處理的都是簡單邏輯，沒啥問題，隨著Web復雜度越來高，JSP能處理的事情也越來越復雜，如果JSP計算量比較大的話，這就會導致UI頁面假死。HTML5中的WorkerThread可以緩解這個問題，Worker Thread通過UI thread創建一個新的線程來進行計算，消息和結果通過Web Message來進行通訊，由於這種異步性，UI便可以較為流暢地響應新到來的事件。
調用過程如下：
1.新的工作線程執行體放在一個單獨的JS文件中，比如worker.js.

1. self.onmessage = function(event){
2. //do the real compute ---begin
3. //
4. //do the real compute ---end
5. //post message back to UI thread
6. self.postMessage(XXXX);
7. };

self.onmessage = function(event){
        //do the real compute ---begin
        //
        //do the real compute ---end
        //post message back to UI thread
	self.postMessage(XXXX);
};

2.在UI的執行線程中生成一個worker對象，worker對象的構造函數參數就是worker.js

1. var worker = new Worker("worker.js");

var worker = new Worker("worker.js");

3.下面就可以發送消息讓worker干活了

1. worker.postMessage("perise");

worker.postMessage("perise");

4.活干完了給UI發送消息,也就是第一步中的

1. self.postMessage(XXXX);

self.postMessage(XXXX);

5.UI進行響應

1. worker.onmessage = function(event){
2. //update UI here
3. };

worker.onmessage = function(event){
                        //update UI here
			};

Notes:
*在Chrome中調試的時候會出現SECURITY_ERR: DOM Exception 18，傳說是Webkit的bug,沒有細究，可以通過搭建一個本地的HTTP服務器來解決，把HTML文件放到本地服務器上就可以繞開這個安全問題了，我使用的是WAMP。
*也許是為了控制Worker Thread的復雜度，Chrome的Worker Thread中不能再生成新的worker thread，其實這個很容易繞開，發送一個消息到UI中，讓UI生成新的Worker Thread就好,Firefox可以支持subworker,但Chrome是可以支持sharework，這種shareworker可以共享JS文件裡面的全局數據