HTML Web Workers

Web worker는 백그라운드에서 실행되는 JavaScript로, 페이지 성능에 영향을 미치지 않습니다.

Web Worker는 무엇인가요?

HTML 페이지에서 스크립트를 실행할 때, 페이지는 스크립트가 완료될 때까지 응답하지 않습니다.

Web worker는 백그라운드에서 실행되는 JavaScript로, 다른 스크립트와 독립적이며 페이지 성능에 영향을 미치지 않습니다. 어떤 일을 하고 싶다면 계속 할 수 있습니다: 클릭, 선택 등, 이때 web worker는 백그라운드에서 실행됩니다.

브라우저 지원

표中的数字表示完全支持 Web Worker의 최초 브라우저 버전.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers 예제

아래 예제는 백그라운드에서 카운트하는 간단한 web worker를 생성합니다:

카운트:

직접 경험해보세요

Web Worker 지원 검사

Web Worker를 생성하기 전에, 사용자 브라우저가 그것을 지원하는지 확인해 주세요:

if (typeof(Worker) !== "undefined") {
    // 예! Web worker를 지원합니다!
    // 일부 코드.....
}
    // 죄송합니다! Web Worker를 지원하지 않습니다!
}

Web Worker 파일 생성

이제, 외부 JavaScript 파일에서 우리의 web worker를 생성해 보겠습니다.

이곳에서는 카운트 스크립트를 만듭니다. 이 스크립트는 "demo_workers.js" 파일에 저장됩니다:

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

위 코드에서 중요한 부분은 postMessage() 메서드입니다 - 이 메서드는 HTML 페이지로 메시지를 전달하는 데 사용됩니다.

주석: web worker는 이렇게 간단한 스크립트에 사용되지 않고, 대신 CPU 자원을 많이 소모하는 작업에 사용됩니다.

Web Worker 객체 생성

지금까지는 web worker 파일을 가지고 있습니다. 이를 HTML 페이지에서 호출해야 합니다.

아래 코드 줄은 worker가 존재하는지 확인합니다. 존재하지 않으면, 새로운 web worker 객체를 생성하고 "demo_workers.js" 파일 안의 코드를 실행합니다:

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

그런 다음, web worker에서 발생하고 수신할 수 있는 메시지를 받을 수 있습니다.

web worker에 "onmessage" 이벤트 리스너를 추가하세요:

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

web worker가 메시지를 전송할 때, 이벤트 리스너 안의 코드가 실행됩니다. web worker에서 온 데이터는 event.data에 저장됩니다.

Web Worker 종료

web worker를 생성한 후, 그는 메시지를 계속 수신하기 시작합니다(외부 스크립트가 완료된 후에도). 그가 종료될 때까지 이 상태가 유지됩니다.

web worker를 종료하고, 브라우저/컴퓨터 자원을 해제하려면 terminate() 메서드를 사용하세요:

w.terminate();

Web Worker 재사용

worker 변수를 undefined로 설정하면, 그가 종료된 후에도 코드를 다시 사용할 수 있습니다:

w = undefined;

전체 Web Worker 예제 코드

저희는 .js 파일에서 Worker 코드를 보았습니다. 아래는 HTML 페이지 코드입니다:

예제

<!DOCTYPE html>
<html>
<body>
<p>숫자 세기: <output id="result"></output></p>
<button onclick="startWorker()">Worker 시작</button> 
<button onclick="stopWorker()">Worker 중지</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

직접 경험해보세요

Web Worker와 DOM

web worker가 외부 파일에 위치하고 있기 때문에 다음과 같은 JavaScript 객체에 접근할 수 없습니다:

  • window 객체
  • document 객체
  • parent 객체