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.jsfunction 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);
};표시 효과: 
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
웹 작업자 개체 만들기
이미 웹 작업자 파일이 있으므로 이제 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();
