Web Workers | Minstudio

Web Workers: 웹 브라우저의 멀티 스레딩

JavaScript는 기본적으로 싱글 스레드(Single-threaded)로 동작하기 때문에, 복잡한 연산이나 대량의 데이터를 처리할 때 메인 스레드(UI 스레드)가 블로킹되어 화면이 멈추는 현상이 발생할 수 있습니다.

Web Workers API는 브라우저 백그라운드에 독립적인 워커 스레드를 생성하여, 무거운 연산을 메인 스레드와 분리해 병렬로 처리합니다. 이를 통해 UI가 끊기지 않고 부드럽게 유지될 수 있습니다. (단, 워커 스레드는 DOM에 직접 접근할 수 없으며 메인 스레드와 postMessage로 데이터를 교환해야 합니다.)

[그림 1] 메인 스레드와 워커 스레드의 병렬 처리 아키텍처

1. 스레드 간 데이터 통신 구조

메인 스레드와 워커 스레드가 메시지를 주고받으며 연산을 분담하는 과정입니다.

2. Web Worker 주요 메서드 및 이벤트

스레드 간 통신을 위해 사용되는 API들입니다.

메서드 / 이벤트	설명
`new Worker(scriptURL)`	지정된 자바스크립트 파일을 로드하여 새로운 워커 스레드를 생성합니다.
`postMessage(data)`	메인 스레드와 워커 스레드 간에 데이터를 전송합니다. 전송된 데이터는 복사본(Clone)으로 전달됩니다.
`onmessage` (이벤트)	상대방으로부터 `postMessage`를 통해 메시지를 받았을 때 발생하는 이벤트입니다. `event.data`로 값을 읽습니다.
`terminate()`	워커 스레드의 실행을 즉시 종료합니다. (워커 내부에서는 `self.close()`를 사용)