[Common] Web Worker

Web Worker란?

웹 워커(Web Worker)는 Background Thread에서 스크립트를 실행하는 방법

스크립트(Scripts)가 한 번 HTML에서 실행되면 스크립트가 종료될 때까지 현재 페이지는 반응하지 못합니다.

웹 워커를 사용하게 되면 백그라운드에서 다른 스크립트와 독립적으로 스크립트가 실행되며 현재 페이지에 영향을 주지 않습니다. 이를 통해 백그라운드에서 웹 웝커가 실행되는 동안 클릭, 선택 등의 액션을 취할 수 있습니다.

How to Use it?

Web Worker를 사용하기전 지원하는 브라우저임을 확인해야 합니다.

// 지원하는 브라우저 확인 방법

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

웹 워커 사용법은 간단합니다.

1. Worker 실행 파일 (worker.js)를 작성합니다.

// From W3S, worker.js

var i = 0;

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

timedCount();

2. 웹 워커를 적용할 소스에 Worker Object를 생성합니다.

From W3S, App.js

// For Checking Prev Web Worker presence
if (typeof(w) == "undefined") {
  w = new Worker("workers.js");
}

3. 웹 워커 오브젝트에 Message 수신 Event Handler를 추가합니다.

// Receive Message from web worker
w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

4. 웹 워커 종료

w.terminate();

Conclusion

BlockChain Scanner를 작업하다가 Polling을 사용할 일이 있어서 관련 내용을 찾다보니 Web Worker에 대해 알게 되었다.

Web Worker를 이러한 용도로 사용하는지는 조금더 찾아보고 Performance와 UX에 좋은 영향을 줄 수 있다면 적용하려고 한다.

---

Reference : W3Schools - About Web Worker