[JS] 웹 워커 (Web Worker)

웹 워커?

웹 브라우저에서 스레드를 사용하여 script를 백그라운드에서 수행할 수 있도록 해줌

 

Web Workers API

postMessage : Worker 자신의 내부 영역으로 메시지를 전달. 해당 메소드는 Worker 자신에게 보낸 data를 받음
terminate : 즉시 Worker를 종료
onmessage : Worker 객체의 message 이벤트를 구독하면 워커로부터의 메시지를 전달받을 수 있다.
onerror : Worker 객체가 예외를 발생시켰으나 내부적으로 처리되지는 않았다면, 해당 예외는 onerror에 전파된다.

 

활용 방법

1. 백그라운드에서 수행할 작업을 js에 작성(onmessage 함수)

// js/worker.js
onmessage = function (e) {
  const data = e.data;  // 포그라운드에서 postMessage로 넘겨준 데이터
  // 작업수행
  postMessage(/* data */) // 백그라운드 작업 완료시 포그라운드로 메시지
};

 

2. Worker 객체 생성시 백그라운드에서 실행될 js 페이지의 경로를 넣어줌

// index.html
var worker = new Worker("js/worker.js");

 

3. Worker가 스레드 상에서 postMessage를 호출할 경우(1) 포그라운드에서 수행할 작업을 작성 (보통 HTML 렌더링 작업)

// index.html
worker.onmessage = function (e) {
  const data = e.data; // 백그라운드에서 postMessage로 넘겨준 data
  // data를 렌더링
};

 

4. 생성된 Worker의 postMessage를 호출하여 백그라운드 작업 실행

// index.html
worker.postMessage(/* data */)