[js]웹 워커(Web Worker)에 대해서

웹 워커란?

싱글스레드 기반으로 작동하는 javascript는 싱글스레드의 단점을 보완하기 위해 코드들이 비동기로 실행된다. 그러나 API비동기 실행이 너무 많이 쌓이게 되면 모든 작업의 실행 속도가 느려질 수 있다. 이 문제를 해결하기 위해 나온 것이 바로 워커(Worker) 이다.
웹 워커 API가 멀티 스레딩을 지원하게 되어 워커를 이용하면 워커에서 작성된 스크립트는 메인 스레드에서 분기되어 독립된 스레드로 실행되기 때문에 메모리 자원을 효율적으로 사용할 수 있다.

웹 워커(Web Worker) API

Worker는 생성자로 생성된 객체이며 Worker 안에는 '이름있는' 자바스크립트 파일을 실행함
Worker Thread에서는 어떤 코드가 있더라도 실행 가능하다. (몇 가지 제한만 빼면)

• 제한 예시
  • Worker 내에서는 직접 DOM을 조작할 수 없다
  • window 객체의 기본 메서드나 속성 중 사용할 수 없는 것들 존재

Worker <-> 메인 스레드 사이에서는 메시지 시스템 을 통해 데이터 발송
postMessage() 메서드로 메시지 발송
onmessage 이벤트 핸들러에 의해 메시지 응답
메시지는 Message 이벤트의 data 속성에 들어감

웹 워커의 코드상의 구현

• 워커 스크립트 만들기

// worker.js
onmessage = e => {
  console.log('워커가 main script로부터 message를 받음');
  const result = e.data[0] * e.data[1]; // first * second
  if (isNaN(result)){
    postMessage('두 개의 숫자를 입력하세요');
  } else {
    const workerResult = 'Result: ' + result;
    console.log('워커가 main script로 message를 보냄');
    postMessage(workerResult);
  }
}

• 워커 객체 생성

const myWorker = new Worker("worker.js"); // Worker 객체 생성

• main.js 에서의 워커 사용 예시 (읽기만 해도 어느정도 이해할 수 있는 코드이다)

// main.js
const first = document.querySelector('#number1'); // html 에서 id=number1 인 태그 선택
const second = document.querySelector('#number2'); // html 에서 id=number2 인 태그 선택

const result = document.querySelector('.result'); // html 에서 class=result 인 태그 선택

if (window.Worker) { // 현재 사용중인 브라우저가 Worker를 지원하는가??
  const myWorker = new Worker("worker.js");

  first.onchange = function() { // first에서 값이 변경 되었을 때
    myWorker.postMessage([first.value, second.value]);
    console.log('워커한테 메시지 보냄~~');
  }

  second.onchange = function() { // second에서 값이 변경 되었을 때
    myWorker.postMessage([first.value, second.value]);
    console.log('워커한테 메시지 보냄~~');
  }

  myWorker.onmessage = function(e) {
    result.textContent = e.data;
    console.log('워커한테 메시지 왔다!!');
  }
} else {
  console.log('너의 브라우저는 웹 워커를 지원하지 않는구나. 크롬을 쓰렴.');
}

Dedicated Worker

추후 보강 하겠습니다

느낀 점

이번에 이 게시물을 쓰게 되면서 Web Worker 의 존재를 처음 알았다. 알면 알수록 편리한 도구이고 사용법이 아주 무궁무진하리라 생각 된다. 더 자세한 내용은 아래 docs를 참고하면 좋을 것 같다. 한글로 번역이 애매하게 되어 있어서 영문판 docs를 보는 것을 추천한다.

참고

Web Worker를 사용한 이미지 로딩 :
https://blog.rhostem.com/posts/2021-01-03-image-load-by-web-worker
Worker: https://developer.mozilla.org/ko/docs/Web/API/Worker
Using web worker : https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API/Using_web_workers