JavaScript中的Web worker多線程API研究

2019-11-20 13:48:08

字體：大中小

來源：轉載

供稿：網友

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;

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))();

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

上一篇：Nodejs實現多人同時在線移動鼠標的小游戲分享

下一篇：JavaScript實現的一個日期格式化函數分享