HTML5 ? ???

Web Workers

?????? JavaScript? ?????? ? ?? ??? ???? ?? html5 ??? ? ?? ??? ??????. ??? ??? ?? ???? ?????. ??? ??? ? ???? ???? ??? ??? ?? ???? ? ??? ?? ??? ???? ? ????. ??? ??? ?? ????? ???? ?? ???? ??? ? ????

??? ????? JavaScript ??? ??? js ??? ?? ?? ????? Worker ???? ???? ???? ???? ???. ???? ???? ?? ??? ??. Worker ???? ???? ?? ??? ????? ??? ???? ?? ?? ??? ?? ??? ??(???? + ??? + ??)? ???? ???. ? ????? ???? ??? ???? ?? ???? ??? ??? ??? ????.

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

??? ?? ?

n?? ?? ? ?? 0?? 10000??? ?? ??? ???? ?????. ?? ??? ? ? ???? ??? ?? i*n? ????? ????. ??>

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

?? ??:

? ??? ?? ??

?? ?? JavaScript? ? ??? ??? ?????.

??? ?? ????? ?????. ????? "demo_workers.js" ??? ?????:

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

timedCount();

??? ??? ?? ??? postMessage() ??????. ???? HTML ???? ?? ???? ? ?????.

??: ? ??? ????? ??? ??? ????? ???? ?? CPU? ? ?? ???? ??? ?????.

? ??? ?? ???

?? ? ??? ??? ???? ?? HTML ????? ???? ???.

?? ??? ???? ????? ??? ?????. ??? ?? ?? ? ? ??? ??? ??? ?? "demo_workers.js"?? ??? ?????.

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

?? ?? ? ????? ???? ???? ?????. .

? ???? "onmessage" ??? ???? ?????.

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

<p web="" Worker=""? ???? ???? ??? ???? ??? ?????. event.data=""?? ="" event.data=""? ???? ???? ????.

Web Worker ??

Web Worker ??? ???? ???? ???? ?????(?? ????? ??? ???). ??? ???.

? ???? ???? ????/??? ???? ????? quit() ???? ??????:

w.terminate();

???? ??

??? ??

<!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()">開始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是未定義的,還沒有開始計(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ù),用來處理后端的web worker傳遞過來的消息 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頁面回傳一段消息 <br> setTimeout("timeCount()",500);//定時(shí)任務(wù) <br> } <br> timeCount();//加1計(jì)數(shù),每500毫秒調(diào)用一次</p> </body> </html>

?????? ???

????