Web Workers 시작

Web Workers는 어떻게 생성합니까?

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

worker.onmessage = function(event) {    

    console.log(event.data + " Jan!");    

};    

worker.postMessage("Hello");  

worker.onerror = function(event) {  

    console.log("ERROR: " + event.filename + " (" + event.lineno + "): " + event.message);  

}  

 
task.js

self.onmessage = function(event) {  

    var data = event.data + "! My name is";  

    self.postMessage(data);  

}  

 
우선 Web Workers가 무엇인지 이해해야 합니다.
 
Web Workers는 브라우저 스크립트 처리를 다중 루틴으로 하는 규범으로 대량의 데이터 처리 시 발생하는 페이지 막힘을 해결하기 위한 것이다.
그러나 Web Worker의 코드는 DOM 작업을 수행할 수 없습니다.
Worker는 브라우저 외부와 독립적으로 ECMAScript Core(ECMAScript) 작업만 수행할 수 있는 독립적인 역할 영역이기 때문입니다.
 
다음은 구체적인 방법을 소개한다.
 
Worker
새 Web Worker를 만듭니다.

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

이 코드가 실행될 때 브라우저는task를 불러옵니다.js 이 파일.
js 파일 불러오기가 완료되면 즉시 실행되지 않습니다.Worker 스크립트는 메시지를 받을 때만 실행됩니다.
Web Worker는 현재 크로스 도메인 스크립트를 구현할 수 없습니다.
 
onmessage

worker.onmessage = function(event) { ...};   

onmessage 방법은 리셋 함수를 연결해야 합니다.
메시지 이벤트를 터치하면 리셋 함수가 실행됩니다.Worker 스크립트에서 반환된 데이터를 콜백 함수에 전송합니다.
되돌아오는 데이터는 사실 하나의 Message Event 대상이며, 처리된 데이터는 실제적으로 Message Event 대상의 데이터 속성에 저장된다.
 
postMessage

worker.postMessage("Hello");

postMessage 방법은 정보를 전달하는 데 사용되며, 정보 전달이 성공하면 메시지 이벤트를 촉발합니다.
postMessage는 매개 변수를 가지고 있든 없든 메시지 이벤트를 터치합니다.
그리고postMessage가 실현하는 데이터 전달은 비동기적으로 실행된다.
JSON 구조의 값도 매개 변수로 전달될 수 있습니다.
 

worker.postMessage({  

    name: "Jan",  

    age: "99"  

});   

　　
onerror

worker.onerror = function(event) {  

    console.log("ERROR: " + event.filename + " (" + event.lineno + "): " + event.message);  

}  

onerror 방법도 리셋 함수를 연결해야 합니다.Worker 스크립트가 제대로 실행되지 않을 때 error 이벤트를 터치하고 연결된 리셋 함수를 실행합니다.
 
terminate

worker.terminate()； 

terminate 메서드, 현재 실행 중인 Worker 스크립트를 중지하는 데 사용할 수 있습니다.
 
Worker 스크립트에서 원리는 대개 페이지의worker 대상과 같다.
onmessage를 통해 페이지가 전달하는 데이터를 수신하고 연결된 함수를 실행할 수 있습니다.
postMessage를 통해 페이지에 데이터를 전달할 수도 있습니다.
그러나 다른 점은 Worker 스크립트 내에서 실행을 중지하려면 다음과 같은 코드가 필요합니다.

self.close(); 

물론 Worker 스크립트에 js 파일을 주입할 수도 있습니다.

importScript("task1.js", "task2.js", "task3.js"); 

코드의 실행 순서:task1.js -> task2.js -> task3.js
 
 
 
 
더 많은 관련 자료:https://developer.mozilla.org/en/Using_web_workers