JavaScript中的Web worker多線程API研究，workerapi

JavaScript中的Web worker多線程API研究，workerapi

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就可以跑起來）。