..

Search

45) Web Worker

Web Worker


web worker API

웹 페이지에서 스크립트가 실행되면, 해당 웹 페이지는 실행 중인 스크립트가 종료될 때까지 응답 불가 상태가 됩니다.

web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트입니다.

 

즉, web worker는 스크립트의 다중 스레드(multi-thread)를 지원합니다.

따라서 사용자가 웹 페이지를 이용하면서도, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해줍니다.

 

web worker를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

API ie chrome firefox safari opera
web worker 10.0 4.0 3.5 4.0 11.5

web worker 지원 여부 확인

web worker를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 합니다.

문법

if (typeof(Worker) !== "undefined") {

    // web worker를 위한 코드 부분 }

else {

    // web worker를 지원하지 않는 브라우저를 위한 안내 부분

}


web worker 파일 생성

web worker의 동작을 확인하기 위해 소수를 찾는 외부 자바스크립트 파일을 만듭니다.

예제

var n = 1;

search: while (true) {

    n += 1;

    for (var i = 2; i <= Math.sqrt(n); i += 1)

        if (n % i == 0)

            continue search;

        postMessage(n);

}

 

위의 예제에서 postMessage() 메소드는 HTML 문서에 결과를 전달하기 위해 사용합니다.


web worker 객체 생성

위에서 만든 web worker 파일을 불러올 HTML 파일을 만듭니다.

예제

if(typeof(webworker) == "undefined") {

    webworker = new Worker("/examples/web_worker.js");

}

 

위의 예제는 web worker 파일이 존재하지 않으면, 새로운 web worker 객체를 만들어 줍니다.


worker 객체와의 연결

onmessage 이벤트 리스너(event listener)를 통해 web worker 파일과 메시지를 주고받을 수 있습니다.

예제

webworker.onmessage = function(event) {

    document.getElementById("result").innerHTML = event.data;

};

 

위의 예제에서 web worker 파일이 메시지를 보내면 해당 이벤트 리스너(event listener)가 실행됩니다.

이 때 web worker 파일이 보낸 정보는 event.data에 저장됩니다.


web worker 객체의 실행 종료

web worker 객체는 생성되고 나서 종료될 때까지 계속해서 메시지를 받을 준비를 합니다.

따라서 웹 브라우저나 컴퓨터의 자원을 돌려주기 위해서는 terminate() 메소드를 사용하여 web worker를 반드시 종료해줘야 합니다.

예제

webworker.terminate();


web worker 객체의 재사용

web worker 객체가 종료된 후에는 web worker의 값을 undefined로 설정해야만 web worker 객체를 재사용할 수 있습니다.

예제

webworker = undefined;


web worker 예제

다음 예제는 앞에서 살펴본 web worker의 동작을 하나의 예제로 보여주는 예제입니다.

예제

var webworker;

function startWorker() {

    if(typeof(Worker) !== "undefined") {

        if(typeof(webworker) == "undefined") { webworker = new Worker("/examples/web_worker.js"); }

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

    }

}

function stopWorker() { 

    webworker.terminate();

    webworker = undefined;

}

코딩연습 ▶


연습문제