Web Workers 치트시트

Web Workers는 사용자 인터페이스를 방해하지 않고 백그라운드 스레드에서 스크립트를 실행할 수 있는 간단한 방법을 제공합니다.

백그라운드 스레딩

클라이언트(메인) 스레드

const worker = new Worker('worker.js');

worker.onmessage = function (event) {
  console.log('워커로부터 수신:', event.data);
};

worker.postMessage('메인 스레드에서 보낸 인사!');

메시지는 구조화된 복제 알고리즘(Structured Clone Algorithm)에서 지원하는 모든 데이터 유형(객체, 배열, 문자열, 숫자, Blob, 형식화 배열 등)이 될 수 있습니다.

워커 스레드

// worker.js 내부
self.onmessage = function (event) {
  console.log('워커에서 수신:', event.data);
  self.postMessage({ msg: '워커로부터의 응답' });
};

MessageEvent 구조

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // 전송된 페이로드 데이터
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

이 필드들은 onmessage 내의 MessageEvent 객체에서 사용 가능한 속성들을 설명합니다.