HTML 5 웹 작업자

웹 워커는 백그라운드에서 실행되는 JavaScript이며 페이지 성능에 영향을 미치지 않습니다.

웹워커란?

HTML 페이지에서 스크립트를 실행할 때 스크립트가 완료될 때까지 페이지 상태가 응답하지 않습니다.

웹 워커는 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript이며 페이지 성능에 영향을 미치지 않습니다. 웹 작업자가 백그라운드에서 실행되는 동안 클릭, 선택 등 원하는 작업을 계속할 수 있습니다.

브라우저 지원

웹 작업자는 Internet Explorer를 제외한 모든 주요 브라우저에서 지원됩니다.

HTML5 Web Workers 인스턴스

다음 예에서는 백그라운드에서 계산하는 간단한 웹 작업자를 만듭니다.

계산:

웹 작업자 지원 감지

웹 작업자를 생성하기 전에 사용자의 브라우저가 이를 지원하는지 확인하세요.

iif(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

웹 작업자 파일 생성

이제 외부 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)=="undefined") { w=new Worker("demo_workers.js"); }

이제 할 수 있습니다. 웹 워커로부터 메시지를 보내고 받습니다.

웹 작업자에 "onmessage" 이벤트 리스너를 추가합니다.

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

웹 작업자가 메시지를 전달하면 이벤트 리스너의 코드가 실행됩니다. event.data에는 event.data의 데이터가 포함되어 있습니다.

웹 작업자 종료

웹 작업자 개체를 생성하면 종료될 때까지 (외부 스크립트가 완료된 후에도) 계속해서 메시지를 수신합니다.

Web Worker를 종료하고 브라우저/컴퓨터 리소스를 해제하려면 quit() 메소드를 사용하십시오:

w.terminate();

Web Worker 예제 코드 완성

.js 파일의 작업자 코드. HTML 페이지의 코드는 다음과 같습니다.

인스턴스

   
Count numbers: 
 Start Worker
 Stop Worker 

 <script> var w; function startWorker() { 
 if(typeof(Worker)!=="undefined") { if(typeof(w)==&quot;undefined&quot;) { w=new Worker(&quot;demo_workers.js&quot;); } 
 w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } 
 else 
 { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } 
 } 
 function stopWorker() { w.terminate(); } 
 </script> 
 
  

웹 작업자 및 DOM

웹 작업자는 외부 파일에 있으므로 다음 JavaScript에 액세스할 수 없습니다. object:

window object

document object

parent object

위 내용은 HTML 5 Web Workers의 내용입니다. PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!