快捷導(dǎo)航

JavaScript中的Web worker多線程API研究

更新時(shí)間：2014年12月06日 14:39:29 投稿：junjie

這篇文章主要介紹了JavaScript中的Web worker多線程API研究,Web worker是HTML5的API,允許網(wǎng)頁(yè)在安全的情況下執(zhí)行多線程代碼,需要的朋友可以參考下

HTML5支持了Web Worker這樣的API，允許網(wǎng)頁(yè)在安全的情況下執(zhí)行多線程代碼。不過(guò)Web Worker實(shí)際上受到很多限制，因?yàn)樗鼰o(wú)法真正意義上共享內(nèi)存數(shù)據(jù)，只能通過(guò)消息來(lái)做狀態(tài)通知，所以甚至不能稱(chēng)之為真正意義上的“多線程”。

Web Worker的接口使用起來(lái)很不方便，它基本上自帶一個(gè)sandbox，在沙箱中跑一個(gè)獨(dú)立的js文件，通過(guò) postMessage和 onMessge來(lái)和主線程通信：

復(fù)制代碼代碼如下:

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

var bundle = {message:'Hello world', id:1};

worker.postMessage(bundle); //postMessage可以傳一個(gè)可序列化的對(duì)象過(guò)去

worker.onmessage = function(evt){

    console.log(evt.data);    //比較worker中傳回來(lái)的對(duì)象和主線程中的對(duì)象

    console.log(bundle);  //{message:'Hello world', id:1}

}

復(fù)制代碼代碼如下:

//in my.js

onmessage = function(evt){

    var data = evt.data;

    data.id++;

    postMessage(data); //{message:'Hello world', id:2}

}

得到的結(jié)果可以發(fā)現(xiàn)，線程中得到的data的id增加了，但是傳回來(lái)之后，并沒(méi)有改變主線程的bundle中的id，因此，線程中傳遞的對(duì)象實(shí)際上copy了一份，這樣的話(huà)，線程并沒(méi)有共享數(shù)據(jù)，避免了讀寫(xiě)沖突，所以是安全的。保證線程安全的代價(jià)就是限制了在線程中操作主線程對(duì)象的能力。

這樣一個(gè)有限的多線程機(jī)制使用起來(lái)是很不方便的，我們當(dāng)然希望Worker能夠支持讓代碼看起來(lái)具有同時(shí)操作多線程的能力，例如，支持看起來(lái)像下面這個(gè)樣子的代碼：

復(fù)制代碼代碼如下:

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...
    });
    //...
});

這段代碼里面，我們啟動(dòng)一個(gè)worker之后，能夠讓任意代碼跑在worker中，并且當(dāng)需要操作ui線程（比如讀寫(xiě)dom）時(shí)，可以通過(guò)this.runOnUiThread回到主線程執(zhí)行。

那么如何實(shí)現(xiàn)這個(gè)機(jī)制呢？看下面的代碼：

復(fù)制代碼代碼如下:

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

上面這段代碼定義了一個(gè)ThreadWorker對(duì)象，這個(gè)對(duì)象創(chuàng)建了一個(gè)運(yùn)行thread.js的Web Worker，保存了共享對(duì)象SharedObj，并且對(duì)thread.js發(fā)回的消息進(jìn)行處理。

如果thread.js中傳回了一個(gè)UI_TASK消息，那么運(yùn)行這個(gè)消息傳過(guò)來(lái)的function，否則執(zhí)行run的complete回調(diào) 我們看看thread.js是怎么寫(xiě)的：

復(fù)制代碼代碼如下:

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線程傳過(guò)來(lái)的消息，其中最重要的是THREAD_TASK，這是ui線程傳過(guò)來(lái)的需要worker線程執(zhí)行的“任務(wù)”，由于function是不可序列化的，因此傳遞的是字符串，worker線程通過(guò)解析字符串成function來(lái)執(zhí)行主線程提交的任務(wù)（注意在任務(wù)中將共享對(duì)象sharedObj傳入），執(zhí)行完成后將返回結(jié)果通過(guò)message傳給ui線程。我們仔細(xì)看一下除了返回值returnValue以外，共享對(duì)象sharedObj也會(huì)被傳回，傳回時(shí)，由于worker線程和ui線程并不共享對(duì)象，因此我們?nèi)藶橥ㄟ^(guò)賦值的方式同步兩邊的對(duì)象（這樣是否線程安全？為什么？）

可以看到整個(gè)過(guò)程其實(shí)并不復(fù)雜，這么實(shí)現(xiàn)之后，這個(gè)ThreadWorker可以有以下兩種用法：

復(fù)制代碼代碼如下:

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

這樣的用法從形式和語(yǔ)義上來(lái)說(shuō)都讓代碼具有良好的結(jié)構(gòu)，靈活性和可維護(hù)性。

好了，關(guān)于Web Worker的用法探討就介紹到這里，有興趣的同學(xué)可以去看一下這個(gè)項(xiàng)目：https://github.com/akira-cn/WorkerThread.js (由于Worker需要用服務(wù)器測(cè)試，我特意在項(xiàng)目中放了一個(gè)山寨的httpd.js，是個(gè)非常簡(jiǎn)陋的http服務(wù)的js，直接用node就可以跑起來(lái)）。

您可能感興趣的文章: