최신 웹 개발 튜토리얼

HTML5 Web Workers


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 배경에 숫자를 계산 :

Count numbers:

»그것을 자신을 시도

확인 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 외부 파일에, 그들은 다음과 같은 자바 스크립트 객체에 액세스 할 수 없습니다 :

  • 윈도우 객체
  • 문서 객체
  • 부모 객체