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>计数:<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是未定义的,还没有开始计数 w = new Worker("webworker.js");//创建一个Worker对象,利用Worker的构造函数 } //onmessage是Worker对象的properties w.onmessage = function(event){//事件处理函数,用来处理后端的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对象的terminated方法,终止 w=undefined; } </script> <p>在后台运行的web worker js文件,webworker.js 才能实现效果<br> var i = 0; <br> function timeCount(){ <br> i = i + 1; <br> postMessage(i);//postMessage是Worker对象的方法，用于向html页面回传一段消息 <br> setTimeout("timeCount()",500);//定时任务 <br> } <br> timeCount();//加1计数,每500毫秒调用一次</p> </body> </html>

제출하다 코드 재설정

자동운전