jiraynor’s 하루 2시간 프로그래밍 - HTML 50. 웹 워커 API (Web Workers API) 영상 보러가기

HTML 웹 워커 API

웹 워커란?

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

웹 워커는 페이지의 성능에 영향을 주지 않고 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript입니다. 웹 워커가 백그라운드에서 실행되는 동안 클릭, 선택 등 원하는 작업을 계속할 수 있습니다.

지원 브라우저

표의 숫자는 웹 워커를 완전히 지원하는 최소 브라우저 버전을 지정합니다.

브라우저 구글 Chrome 마이크로소프트 Edge Firefox Safari Opera
버전 4.0 10.0 3.5 4.0 11.5

웹 워커 지원 확인

웹 워커를 작성하기 전에 사용자의 브라우저가 웹 워커를 지원하는지 확인합니다.

if (typeof(Worker) !== "undefined") {
  // 웹워커 지원
} else {
  // 웹워커 미지원
}

웹 워커 파일 생성

이제 외부 JavaScript에서 웹 워커를 생성해 보겠습니다.

여기서는 카운트하는 스크립트를 만듭니다. 스크립트는 “demo_workers.js” 파일에 저장됩니다.

var i = 0;

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

timedCount();

위의 코드에서 중요한 부분은 postMessage() 메서드입니다. 이것은 메시지를 HTML 페이지에 다시 게시하기 위해 사용됩니다.

일반적으로 웹 워커는 이러한 단순한 스크립트가 아니라 CPU를 많이 사용하는 작업에 사용됩니다.

웹 워커 객체 생성

이제 웹 워커 파일을 얻었으니 HTML 페이지에서 호출해야 합니다.

다음 행은 워커가 이미 존재하는지 여부를 확인합니다. 존재하지 않는 경우 새로운 웹 워커 객체를 생성하여 “demo_workers.js” 코드를 실행합니다.

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

그러면 웹 워커와 메시지를 주고받을 수 있습니다.

웹 워커에 “onmessage” 이벤트 리스너를 추가합니다.

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

웹 워커가 메시지를 게시하면 이벤트 리스너 내의 코드가 실행됩니다. 웹 워커의 데이터는 event.data에 저장됩니다.

웹 워커 종료

웹 워커 오브젝트가 생성되면 (외부 스크립트가 종료된 후에도) 종료될 때까지 메시지를 계속 수신합니다.

웹 워커를 종료하고 브라우저/컴퓨터 리소스를 해제하려면 terminate() 메서드를 사용합니다.

w.terminate();

웹 워커 재사용

worker 변수를 undefined로 설정하면 종료 후 코드를 재사용할 수 있습니다.

웹 워커의 전체 코드 예시

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<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;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

웹 워커와 DOM

웹 워커는 외부 파일에 있으므로 다음 javaScript 객체에 액세스할 수 없습니다.

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