webWorker 맛보기

webWorker란?

웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다

worker와 main은 postMessage로 통신

index.html

<div id="result"></div>
    <button id="btn">run</button>

    <script>
      const workerHandle = (e) => {
        let div = document.createElement('div');
        div.textContent = e.data;
        document.getElementById('result').appendChild(div);
      }

      document.getElementById('btn').addEventListener('click', function () {
        let worker1 = new Worker('worker.js');
        let worker2 = new Worker('worker.js');
        let worker3 = new Worker('worker.js');
        worker1.addEventListener('message', workerHandle);
        worker2.addEventListener('message', workerHandle);
        worker3.addEventListener('message', workerHandle);
        worker1.postMessage('일해라 워커1!');
        worker2.postMessage('일해라 워커2!');
        worker3.postMessage('일해라 워커3!');
      });
    </script>

worker.js

function sleep(delay) {
  let start = new Date().getTime();
  while (new Date().getTime() < start + delay);
 }
 self.addEventListener('message', function(e) {
   console.log(e.data); // 일해라 워커!
   sleep(3000); // 3초가 걸림을 표현
   let coords = Math.random();
   console.log(coords);
   self.postMessage(coords);
 });

결과

webWorker 결과

결론 :

브라우저 별로 호환성문제가 있다.
아직은 다른 스레드를 사용하지 않아도 성능이 충분하다.

worker 스레드내에 동작이 제한적이다.

하지만 개인적으로는 매우 좋은 기술이고 탐구해봐야할 기술이라고 생각한다.