HTML5 Web Workers

Web Workers

在html5規(guī)范中引入了web workers概念，解決客戶端JavaScript無(wú)法多線程的問(wèn)題，其定義的worker是指代碼的并行線程，不過(guò)web worker處于一個(gè)自包含的環(huán)境中，無(wú)法訪問(wèn)主線程的window對(duì)象和document對(duì)象，和主線程通信只能通過(guò)異步消息傳遞機(jī)制

我們需要把希望單獨(dú)執(zhí)行的javascript代碼放到一個(gè)單獨(dú)的js文件中，然后在頁(yè)面中調(diào)用Worker構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)線程，參數(shù)是該文件路徑，參數(shù)存放如果是相對(duì)地址，那么要以包含調(diào)用Worker構(gòu)造函數(shù)語(yǔ)句所在腳本為參照，如果是絕對(duì)路徑，需要保證同源（協(xié)議+主機(jī)+端口）。這個(gè)文件不需要我們?cè)陧?yè)面使用script標(biāo)簽顯示引用

var worker=new Worker('js/worker.js');

簡(jiǎn)單的小例子

在一個(gè)頁(yè)面顯示0~10000內(nèi)所有可以被n整除的數(shù)，當(dāng)然我們不用i*n這種，要略微使計(jì)算顯得復(fù)雜一些嘛

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Web Workers</title>
</head>
<body>
  <h1>Web Workers</h1>
      <div id="test" style="width:500px;"></div>
    <script type="text/javascript">
        var worker=new Worker('js/worker.js');
        worker.postMessage({
            n:69
        });
        worker.onmessage=function(e){
            var test=document.getElementById('test').innerHTML=e.data;        
        };
    </script>
</body>
</html>

/js/worker.js

function calc(n){
    var result=[];
    for(var i=1;i<10000;i++){
        var tem=i;
        if(i%n==0){
            if(i%(10*n)==0){
                tem+='<br/>';
            }
            result.push(tem);
        }
    }

    self.postMessage(result.join(' '));
    self.close();
}

onmessage=function(e){
    calc(e.data.n);
};

顯示效果：

創(chuàng)建 web worker 文件

現(xiàn)在，讓我們?cè)谝粋€(gè)外部 JavaScript 中創(chuàng)建我們的 web worker。

在這里，我們創(chuàng)建了計(jì)數(shù)腳本。該腳本存儲(chǔ)于 "demo_workers.js" 文件中：

var i=0;

function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

以上代碼中重要的部分是 postMessage() 方法 - 它用于向 HTML 頁(yè)面?zhèn)骰匾欢蜗ⅰ?/p>

注意: web worker 通常不用于如此簡(jiǎn)單的腳本，而是用于更耗費(fèi) CPU 資源的任務(wù)。

創(chuàng)建 Web Worker 對(duì)象

我們已經(jīng)有了 web worker 文件，現(xiàn)在我們需要從 HTML 頁(yè)面調(diào)用它。

下面的代碼檢測(cè)是否存在 worker，如果不存在，- 它會(huì)創(chuàng)建一個(gè)新的 web worker 對(duì)象，然后運(yùn)行 "demo_workers.js" 中的代碼：

if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}

然后我們就可以從 web worker 發(fā)生和接收消息了。

向 web worker 添加一個(gè) "onmessage" 事件監(jiān)聽(tīng)器：

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

<p當(dāng) web="" worker="" 傳遞消息時(shí)，會(huì)執(zhí)行事件監(jiān)聽(tīng)器中的代碼。event.data="" 中存有來(lái)自="" event.data="" 的數(shù)據(jù)。

終止 Web Worker

當(dāng)我們創(chuàng)建 web worker 對(duì)象后，它會(huì)繼續(xù)監(jiān)聽(tīng)消息（即使在外部腳本完成之后）直到其被終止為止。

如需終止 web worker，并釋放瀏覽器/計(jì)算機(jī)資源，請(qǐng)使用 terminate() 方法：

w.terminate();

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body>  <p>計(jì)數(shù):<output id="result"></output></p> <button onclick="startWorker()">開(kāi)始worker</button> <button onclick="endWorker()">停止worker</button> <br><br> <script type="text/javascript"> var w; function startWorker(){ if(typeof(Worker)!="undefined"){//瀏覽器支持web worker if(typeof(w)=="undefined"){//w是未定義的,還沒(méi)有開(kāi)始計(jì)數(shù) w = new Worker("webworker.js");//創(chuàng)建一個(gè)Worker對(duì)象,利用Worker的構(gòu)造函數(shù) } //onmessage是Worker對(duì)象的properties w.onmessage = function(event){//事件處理函數(shù),用來(lái)處理后端的web worker傳遞過(guò)來(lái)的消息 document.getElementById("result").innerHTML=event.data; }; }else{ document.getElementById("result").innerHTML="sorry,your browser does not support web workers"; } } function endWorker(){ w.terminate();//利用Worker對(duì)象的terminated方法,終止 w=undefined; } </script> <p>在后臺(tái)運(yùn)行的web worker js文件,webworker.js 才能實(shí)現(xiàn)效果<br> var i = 0; <br> function timeCount(){ <br> i = i + 1; <br> postMessage(i);//postMessage是Worker對(duì)象的方法，用于向html頁(yè)面回傳一段消息 <br> setTimeout("timeCount()",500);//定時(shí)任務(wù) <br> } <br> timeCount();//加1計(jì)數(shù),每500毫秒調(diào)用一次</p> </body> </html>

einreichen Code zurücksetzen

Automatische Operation