HTML5支持了Web Worker這樣的API，允許網頁在安全的情況下執行多線程代碼。不過Web Worker實際上受到很多限制，因為它無法真正意義上共享內存數據，只能通過消息來做狀態通知，所以甚至不能稱之為真正意義上的“多線程”。
Web Worker的接口使用起來很不方便，它基本上自帶一個sandbox，在沙箱中跑一個獨立的js文件，通過 postMessage和 onMessge來和主線程通信：
復制代碼 代碼如下:
var worker = new Worker("my.js");
var bundle = {message:'Hello world', id:1};
worker.postMessage(bundle); //postMessage可以傳一個可序列化的對象過去
worker.onmessage = function(evt){
console.log(evt.data); //比較worker中傳回來的對象和主線程中的對象
console.log(bundle); //{message:'Hello world', id:1}
}
復制代碼 代碼如下:
//in my.js
onmessage = function(evt){
var data = evt.data;
data.id++;
postMessage(data); //{message:'Hello world', id:2}
}
得到的結果可以發現，線程中得到的data的id增加了，但是傳回來之後，並沒有改變主線程的bundle中的id，因此，線程中傳遞的對象實際上copy了一份，這樣的話，線程並沒有共享數據，避免了讀寫沖突，所以是安全的。保證線程安全的代價就是限制了在線程中操作主線程對象的能力。
這樣一個有限的多線程機制使用起來是很不方便的，我們當然希望Worker能夠支持讓代碼看起來具有同時操作多線程的能力，例如，支持看起來像下面這個樣子的代碼：
復制代碼 代碼如下:
var worker = new ThreadWorker(bundle /*shared obj*/);
worker.run(function(bundle){
//do sth in worker thread...
this.runOnUiThread(function(bundle /*shared obj*/){
//do sth in main ui thread...
});
//...
});
這段代碼裡面，我們啟動一個worker之後，能夠讓任意代碼跑在worker中，並且當需要操作ui線程（比如讀寫dom）時，可以通過this.runOnUiThread回到主線程執行。
那麼如何實現這個機制呢？ 看下面的代碼：
復制代碼 代碼如下:
function WorkerThread(sharedObj){
this._worker = new Worker("thread.js");
this._completes = {};
this._task_id = 0;
this.sharedObj = sharedObj;
var self = this;
this._worker.onmessage = function(evt){
var ret = evt.data;
if(ret.__UI_TASK__){
//run on ui task
var fn = (new Function("return "+ret.__UI_TASK__))();
fn(ret.sharedObj);
}else{
self.sharedObj = ret.sharedObj;
self._completes[ret.taskId](ret);
}
}
}
WorkerThread.prototype.run = function(task, complete){
var _task = {__THREAD_TASK__:task.toString(), sharedObj: this.sharedObj, taskId: this._task_id};
this._completes[this._task_id++] = complete;
this._worker.postMessage(_task);
}
上面這段代碼定義了一個ThreadWorker對象，這個對象創建了一個運行thread.js的Web Worker，保存了共享對象SharedObj，並且對thread.js發回的消息進行處理。
如果thread.js中傳回了一個UI_TASK消息，那麼運行這個消息傳過來的function，否則執行run的complete回調 我們看看thread.js是怎麼寫的：
復制代碼 代碼如下:
onmessage = function(evt){
var data = evt.data;
if(data && data.__THREAD_TASK__){
var task = data.__THREAD_TASK__;
try{
var fn = (new Function("return "+task))();
var ctx = {
threadSignal: true,
sleep: function(interval){
ctx.threadSignal = false;
setTimeout(_run, interval);
},
runOnUiThread: function(task){
postMessage({__UI_TASK__:task.toString(), sharedObj:data.sharedObj});
}
}
function _run(){
ctx.threadSignal = true;
var ret = fn.call(ctx, data.sharedObj);
postMessage({error:null, returnValue:ret, __THREAD_TASK__:task, sharedObj:data.sharedObj, taskId: data.taskId});
}
_run(0);
}catch(ex){
postMessage({error:ex.toString() , returnValue:null, sharedObj: data.sharedObj});
}
}
}
可以看到，thread.js接收ui線程傳過來的消息，其中最重要的是THREAD_TASK，這是ui線程傳過來的需要worker線程執行的“任務”，由於function是不可序列化的，因此傳遞的是字符串，worker線程通過解析字符串成function來執行主線程提交的任務（注意在任務中將共享對象sharedObj傳入），執行完成後將返回結果通過message傳給ui線程。我們仔細看一下除了返回值returnValue以外，共享對象sharedObj也會被傳回，傳回時，由於worker線程和ui線程並不共享對象，因此我們人為通過賦值的方式同步兩邊的對象（這樣是否線程安全？為什麼？）
可以看到整個過程其實並不復雜，這麼實現之後，這個ThreadWorker可以有以下兩種用法：
復制代碼 代碼如下:
var t1 = new WorkerThread({i: 100} /*shared obj*/);
setInterval(function(){
t1.run(function(sharedObj){
return sharedObj.i++;
},
function(r){
console.log("t1>" + r.returnValue + ":" + r.error);
}
);
}, 500);
var t2 = new WorkerThread({i: 50});
t2.run(function(sharedObj){
while(this.threadSignal){
sharedObj.i++;
this.runOnUiThread(function(sharedObj){
W("body ul").appendChild("<li>"+sharedObj.i+"</li>");
});
this.sleep(500);
}
return sharedObj.i;
}, function(r){
console.log("t2>" + r.returnValue + ":" + r.error);
});
這樣的用法從形式和語義上來說都讓代碼具有良好的結構，靈活性和可維護性。
好了，關於Web Worker的用法探討就介紹到這裡，有興趣的同學可以去看一下這個項目：https://github.com/akira-cn/WorkerThread.js (由於Worker需要用服務器測試，我特意在項目中放了一個山寨的httpd.js，是個非常簡陋的http服務的js，直接用node就可以跑起來）。