JavaScript中的Web worker多執行緒API研究_javascript技巧

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: data.taskId: data.             }

            _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} /*共用物件*/);

        setInterval(function(){
            t1.run(函數(sharedObj){
                    返回sharedObj.i;
                },
                函數(r){
                    console.log("t1>" r.returnValue ":" r.error);
                }
            );
        }, 500);
var t2 = new WorkerThread({i: 50});

        t2.run(function(sharedObj){  
            while(this.threadSignal){
                共享物件.i ;

                this.runOnUiThread(function(sharedObj){
                    W("body ul").appendChild("

" shareObj.i "

");
                });

                this.sleep(500);
            }
            返回sharedObj.i;
        }, 函數(r){
            console.log("t2>" r.returnValue ":" r.error);
        });

這樣的方式從形式和語意上來說都讓其具有良好的結構、靈活和可程式化。

好了，關於Web Worker的探討就介紹到這裡了，有興趣的同學可以看看這個專案：https://github.com/akira-cn/WorkerThread.js (由於Worker需要用伺服器測試，我特意在專案中放了一個山寨的httpd.js，是個很簡陋的http服務的js，直接用node就可以跑起來）。