한양과기고 에듀테크 수업도구 대시보드

자바스크립트는 기본적으로 싱글 스레드다. 메인 스레드가 무거운 계산을 하는 동안에는 화면 그리기·애니메이션·클릭 반응까지 전부 멈춘다. Web Worker는 브라우저가 제공하는 별도의 백그라운드 스레드로, 무거운 연산을 메인 스레드 밖으로 옮겨 화면이 계속 살아있게 만든다. 아래에서 같은 소수 찾기 연산을 메인 스레드와 Worker에서 각각 실행해 차이를 직접 확인해보자.

탐색 범위 N 2,000,000 이하

🧱 메인 스레드에서 실행 BLOCKING

0.0s

경과 시간 (멈추면 UI가 죽은 것)

계산 중 입력창이 먹통이 되고, 스피너·타이머도 함께 멈춥니다.

🧵 Web Worker에서 실행 NON-BLOCKING

0.0s

경과 시간 (계속 흐름)

Worker가 백그라운드에서 계산하는 동안 UI는 완전히 자유롭습니다.

⚡ 메인 스레드 ↔ Worker 메시지 흐름

메인: worker.postMessage(n)

→

Worker: onmessage 수신 → 계산 시작

Worker: self.postMessage(result)

→

메인: worker.onmessage → 결과 반영

핵심: 메인 스레드와 Worker는 메모리를 공유하지 않는다. 서로 postMessage()로 데이터를 복사해서 주고받을 뿐이라, DOM에는 접근할 수 없지만 그만큼 데이터 경쟁(race condition) 걱정 없이 안전하다.

main.js — Worker 생성 및 통신

const worker = new Worker("prime-worker.js"); worker.postMessage({ n: 2000000 }); worker.onmessage = (e) => { console.log("소수 개수:", e.data.count); // 이 콜백이 실행되는 동안에도 // 화면은 전혀 멈추지 않는다 };

prime-worker.js — 별도 스레드에서 실행

self.onmessage = (e) => { const n = e.data.n; let count = 0; for (let i = 2; i < n; i++) { if (isPrime(i)) count++; } // DOM 접근 불가 — 오직 메시지로만 결과 전달 self.postMessage({ count }); };

언제 Web Worker를 쓸까? 이미지·비디오 처리, 대용량 JSON 파싱, 복잡한 수치 계산처럼 수백 ms 이상 걸리는 순수 연산에 적합하다. 반대로 DOM 조작이나 짧은 작업에는 Worker 생성·메시지 복사 비용이 오히려 손해라 굳이 쓸 필요가 없다. 화면을 그대로 두고 오프라인 캐싱·푸시 알림을 다루는 Service Worker와는 목적이 다르다는 점도 기억해두자.