웹 워커(Web Worker)

자바스크립트 메인 스레드

싱글 스레드를 사용하는 자바스크립트는 주어진 시간에 한 줄의 코드 만 실행할 수 있다. 수행해야 할 작업들이 대기열에 추가되고 브라우저의 자바스크립트 엔진에 의해 한 번에 하나씩 실행된다.

자바스크립트의 싱글 스레드 패턴은 블로킹이라는 성능 문제를 발생시킨다. 메인 스레드의 특정 작업이 완료되는데 매우 오랜 시간이 걸려서 다른 모든 작업들이 실행되지 않을 때 발생한다.

블로킹은 웹 프로그램의 속도를 느리게 하거나 때로는 정지된 상황을 만들고 사용자는 이런 상황들을 매우 불편하게 느낀다😥

웹 워커

웹 워커를 사용하면 웹 프로그램에서 메인 스레드와 별도로 백그라운드 스레드에서 스크립트 작업을 실핼할 수 있다.

즉, 오랜 시간이 걸리는 작업을 백그라운드 스레드로 전달하여 처리하기 때문에 메인 스레드가 블록킹되지 않고 실행될 수 있어서 사용자가 불편함을 느끼는 상황을 최소화 할 수 있다.

UI Block을 피하기 위해 무거운 연산을 백그라운드 스레드에서 실행하기 위해서 사용한다.

웹 워커 생성

하나의 웹 워커를 생성하려면 워커 생성자에 자바스크립트 파일의 경로를 전달하면된다.

// index.js
const wroker = new Worker('worker.js')

웹 워커 통신

메인 스레드와 웹 워커는 메시지 시스템을 통해서 서로에게 데이터를 전달한다.
웹 워커 API는 postMessage로 메시지를 전달하고 onmessage로 메시지를 받는다.

// index.js
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);

// worker.js
self.postMessage(data);
self.onmessage = (e) => console.log(e.data);

웹 워커 종료

// index.js
worker.terminate();

// worker.js
self.close(); 

웹 워커 한계

• 웹 워커는 DOM을 직접 조작할 수 없으며 window 객체의 메서드 및 속성에 대한 엑세스가 제한된다.
• 작업자는 파일 시스템에서 직접 실행할 수 없고 서버를 통해서만 실행 가능하다.