[api] HTML5 - Web Worker - 백그라운드실행JS (= 웹워커)

1. Web Worker 예제 - 백그라운드 실행 JS
2. Web Worker 정의

Web Worker 예제 - 백그라운드 실행 JS

 

<p>숫자 세기: <output id="result"></output></p>

<button onclick="startWorker()">Worker 시작</button> 

<button onclick="stopWorker()">Worker 중단</button>

<script>

var w;

function startWorker() {

  if(typeof(Worker) !== "undefined") { // Web Worker 지원여부 체크

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

      w = new Worker("num_count.js"); // Web Worker 객체 생성

    }

    w.onmessage = function(event) { // 서버에서 메세지수신 이벤트 발생하면

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

    };

  } else {

    document.getElementById("result").innerHTML = "Web Workers 지원 않는 브라우저는 개나 줘버려.";

  }

}

function stopWorker() { 

  w.terminate(); // Web Worker 제거

  w = undefined; // Web Worker 제거 후, 코드 재사용 목적

}

</script>

 

codepen

---

PS. /num_count.js 파일 소스

 

var i = 0;

function timedCount() {

  i = i + 1;

  postMessage(i);

  setTimeout("timedCount()",500);

}

timedCount();

 

codepen

Web Worker 정의

 

웹페이지 성능에 영향 안 주면서, 백그라운드에서 실행되는 JS.

 

---

 

IE10 이상 주요 최신 브라우저 모두 지원.