HTML5-Web Worker API에 대한 자세한 코드 설명

1. 개요
HTML5 Web Worker는 Javascript 프로그램을 활성화하여 백그라운드에서 단일 스레드에서 많은 시간이 소요되는 계산 작업을 수행할 수 있습니다. Web Worker는 실행 중에 DOM에 직접 액세스할 수 없습니다. 웹 작업자는 CPU와 시스템 리소스도 소비합니다. Web Worker와 페이지 간의 통신은 Web Worker의 postMessage 메소드와 messageevent를 통해 이루어질 수 있습니다.

2. 브라우저는 감지를 지원합니다

 function loadDemo() 
   { 
      
if
 (typeof(Worker) !== "undefined") 
      { 
         
document
.getElementById("support").innerHTML =  
            "Excellent! Your browser supports HTML5 Web Workers"; 
      } 
   }

3.worker객체
작업자 객체는 window 객체에는 다음과 같은 메소드가 있습니다. •Worker(jsFile_URL): 생성자, 매개변수는 웹 작업자 작업을 수행하는 데 사용되는 JavaScript 파일의 URL 주소이며 상대 주소 또는 절대 주소일 수 있습니다. 작업자는 재귀적으로 생성될 수 있습니다. 페이지에서 호출됩니다.
•terminate(): 작업자를 종료한 후에는 재사용할 수 없으며 다시 빌드만 가능합니다.
페이지로 전화주세요.
•close(): 작업자 내에서 호출되어 작업자를 종료합니다.
•importScripts(jsFile_1_URL, jsFile_2_URL, ...): 기존 작업자에게 JavaScript 파일을 비동기적으로 가져오는 작업이 매개변수 순서대로 실행됩니다. Worker 스크립트 내에서 호출됩니다.
•postMessage(msg): werker 페이지와 작업자 간의 통신 방법을 만듭니다. 예:

    // -------------由页面向worker
发送消息
------------------
      document.getElementById("helloButton").
onclick
 = function() { 
         worker.postMessage("Here's a message 
for
 you"); 
      }
      // -------------页面接收来自worker的消息----------------      
      worker.addEvent
List
ener("message", messageHan
dl
er, true); 
      function messageHandler(e) { 
         // process message from worker 
      } 
      // -------------JavaScript
文件处理
来自页面的消息----------------
      addEventListener("message", messageHandler, true);
      function messageHandler(e) { 
         postMessage("worker says: " + e.data + " too"); 
      }

4.

오류 처리

 // -------------在页面处理来自worker的消息----------------
   worker.addEventListener("error", errorHandler, true);
   function errorHandler(e) { 
      console.log(e.message, e); 
   }

5.

타이머 사용 작업자가 DOM의 개체에 직접 액세스할 수는 없지만 창 개체의 시간 관련 메서드와
속성을 완전히 사용할 수 있습니다. 다른 속성을 사용하십시오. 예:

  var t = 
set
Time
out(postMessage, 2000, "delayed message");

위 내용은 HTML5-Web Worker API에 대한 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!