web worker 자바 스크립트가 페이지의 성능에 영향을주지 않고, 백그라운드에서 실행됩니다.
무엇입니까 Web Worker ?
HTML 페이지에 스크립트를 실행하면 스크립트가 완료 될 때까지 페이지가 응답하지 않게됩니다.
웹 노동자, 월드 와이드 웹 컨소시엄 (W3C)과 웹 하이퍼 텍스트 응용 기술 워킹 그룹 (WHATWG)에 의해 정의 된, 독립적으로 다른 사용자 인터페이스 스크립트의 백그라운드에서 실행되는 HTML 페이지에서 실행되는 자바 스크립트 스크립트입니다 같은 HTML 페이지에서 실행되었을 수 있습니다. 웹 근로자들은보다 효율적으로 멀티 코어 CPU를 활용할 수 있습니다.
개요
WHATWG에 의해 구상으로, 웹 근로자는 상대적으로 무거운 무게입니다. 그들은 오래 지속 될 것으로 예상되어, 높은 시동 성능 비용, 높은 인스턴스 당 메모리 비용이.
웹 근로자 의도하거나 시스템 자원을 게걸 수 있기 때문에 많은 수를 사용하지 않을 수 있습니다.
웹 노동자 동시 브라우저 스레드의 실행 및 하나 또는 백그라운드에서 실행 더 자바 스크립트 스레드 수 있습니다. 실행의 단일 스레드를 다음 브라우저는 계속하기 전에 실행 완료 자바 스크립트 프로그램을 기다려야 할 것이다 이것은 프로그래머가 사용자로부터 숨길하실 수 있습니다 상당한 시간이 걸릴 수 있습니다.
그것은 백그라운드에서 스크립트를 실행하는 동안 정상적인 작업을 계속하기 위해 브라우저 수 있습니다. 웹 작업자 사양은 HTML5 규격에서 별도의 사양입니다 및 HTML5와 함께 사용할 수 있습니다.
전용 및 공유 노동자 : 웹 근로자의 두 가지 유형이 있습니다.
웹 근로자가 백그라운드에서 실행하면, 그들은 DOM에 직접 액세스 할 수 있지만 메시지 전달에 의한 문서와 통신하지 않습니다. 이것은 자바 스크립트 프로그램의 멀티 스레드 실행이 가능합니다.
브라우저 지원
테이블의 숫자는 완벽하게 지원하는 최초의 브라우저 버전 지정 Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workers 예
아래의 예는 간단한 생성 web worker 배경에 숫자를 계산 :
확인 Web Worker 지원
작성하기 전에 web worker , 사용자의 브라우저를 지원하는지 여부를 확인 :
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
크리에이트 Web Worker 파일을
이제, 우리 만들 수있는 web worker 외부 자바 스크립트.
여기, 우리가 계산하는 스크립트를 만들 수 있습니다. 스크립트는에 저장된다 "/html/demo_workers.js" 파일 :
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
코드의 중요한 부분은 위이다 postMessage() 다시 HTML 페이지에 메시지를 게시하는 데 사용됩니다 - 방법.
Note: 보통의 web workers 같은 간단한 스크립트에 사용하지만, 더 많은 CPU 집약적 인 작업하지 않습니다.
크리에이트 Web Worker 개체
이제 우리는이 것을 web worker 파일을, 우리는 HTML 페이지에서 호출 할 필요가있다.
경우 다음 줄은 확인 web worker 없는 경우 이미 존재 - 그것은 새로운 생성 web worker 객체와의 코드 실행 "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
그럼 우리가 보내고 메시지를 수신 할 수있는 web worker .
추가 "onmessage" 받는 이벤트 리스너를 web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
때 web worker 게시물 메시지는 이벤트 리스너 내에서 코드가 실행된다. 로부터 데이터 web worker event.data에 저장됩니다.
종료 Web Worker
때 web worker 개체가 만들어, 그것은 메시지를 듣고 계속 (even after the external script is finished) 가 종료 될 때까지.
종료하려면 web worker 사용, 무료 브라우저 / 컴퓨터 리소스를 terminate() 메소드를 :
w.terminate();
재사용 Web Worker
당신은 설정하면 web worker 정의에 변수가 종료 된 후, 당신은 코드를 재사용 할 수 있습니다 :
w = undefined;
전체 Web Worker 예제 코드
우리는 이미 본 Web Worker 코드 .js 파일을. 아래는 HTML 페이지에 대한 코드는 다음과 같습니다
예
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> »그것을 자신을 시도 Web Workers 와 DOM
이후 web workers 외부 파일에, 그들은 다음과 같은 자바 스크립트 객체에 액세스 할 수 없습니다 :
- 윈도우 객체
- 문서 객체
- 부모 객체