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 객체