[Worker] Web Worker

Web Worker

• Web Worker는 Service worker와 마찬가지로 브라우저 영역 외 백그라운드 영역에서 별개의 스레드로 동작되는 프로세스 입니다. 기존 Dom의 UI 스레드에 영향을 주지 않기 때문에 오랜 시간이 걸리거나 복잡한 수학계산 영역, 이미지, 애니메이션 등 브라우저의 메인 스레드 하나로 처리하기에 영향을 주는 기능들을 Web Worker에서 동작시킬 수 있습니다. 

 

Web Worker vs Service Worker

• Service worker의 주 기능으로 네트워크 프록시 역할을 수행하여 Fetch와 같은 api 요청을 가로채서 커스텀한 Handling을 할 수 있습니다. 또한 브라우저가 닫히더라도 백그라운드에 남아 있기 때문에 PWA(Progressive Web App)의 Push 알림 등의 기능을 지원합니다. 
• Web Worker는 브라우저의 탭 개별적인 Worker를 생성할 수 있으며, 탭 종료 시 해당 탭에서 동작되는 Web Worker가 종료됩니다. Web Worker는 UI Block(기타 연산 실행으로 인한 멈춤현상)이 되지 않도록 구현하고 싶을 때 사용합니다.

 

Web Worker 사용법

// main.js 
import Worker from 'web-worker';

// worker 초기화
const url = new URL('./worker.js', import.meta.url);
// worker instance 생성
const worker = new Worker(url);

// worker로 부터 수신할 eventListener
worker.addEventListener('message', e => {
  console.log(e.data)  // "hi!"
});

// 메세지 전송
worker.postMessage('hello');

// worker.js
// worker 스레드측 eventListener 등록
addEventListener('message', e => {
	
  //message 동작 정의 (이미지 로딩, 수학연산 등)
  if (e.data === 'hello') {
    postMessage('hi!');
  }
});

 

참고 사이트
https://blog.rhostem.com/posts/2021-01-03-image-load-by-web-worker

https://www.npmjs.com/package/web-worker

https://velog.io/@yrnana/Web-Worker%EC%99%80-Service-Worker