[Web API] Web Workers API

스크립트 연산을 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술

종류

• 전용 워커 - 단일 스크립트에서만 사용하는 워커 : DedicatedWorkerGlobalScope
• 공유 워커 - 여러 스크립트에서 공유하는 워커 : SharedWorkerGlobalScope
  • SharedWorker
• 서비스 워커 - 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할
  • 네트워크 요청 인터셉트
  • 푸시 알람
  • 백그라운드 동기화
• 오디오 워커 - 직접적인 오디오 처리 능력 제공

제한사항

1. 워커에서 DOM 직접 조작 불가능
2. window 의 일부 메소드 사용 불가능
3. WebSocket 과 IndexedDB 는 사용 가능

데이터 교환

워커와 메인 스레드 간의 데이터 교환은 메세지 시스템 사용 (postMessage, onmessage) 데이터는 복사하고 공유는 하지 않음

Example

!! 워커 생성 시 Worker() 생성자 사용함. 워커 스레드 생성시에는 현재 window 와는 다른 전역 Context 에서 생성해야 동작함
(테스트 위해서 $ npx lite-server 이용했음)

전용워커)

// main.js
if (window.Worker) {
  const myWorker = new Worker("worker.js");
  const payload = {flag: 1}
  myWorker.postMessage(payload);

  myWorker.onmessage = function(e) {
    if (payload.data == e.data) {
      console.log('Never called');
    } else {
      console.log('Always called');
    }
  }
}

// worker.js
onmessage = function(e) {
  console.log(e.data) // {flag: 1}

  e.data.flag = 2;  // 데이터를 공유하지 않기에 main.js 의 payload 객체에 영향을 주지 않음

  postMessage(e.data.flag);
}

공유워커)

// main.js
if (window.SharedWorker) {
  const myWorker = new SharedWorker("worker.js");
  const payload = {flag: 1}
  myWorker.port.postMessage(payload);
  myWorker.port.onmessage = function(e) {
    console.log(e.data);
  }
}

// worker.js
onconnect = function (event) {
  const port = event.ports[0];

  port.onmessage = function(e) {
    port.postMessage('');
  }
}