JavaScript 의 단일 스레드 구조로 인한 UI 블로킹 문제를 해결하기 위해 HTML5 Web Workers API 가 도입되었습니다. Web Workers 는 별도의 스레드에서 백그라운드 처리를 수행하여 CPU 다중 코어를 활용하고 느린 스크립트 경고 (slow-script warnings) 를 방지합니다. 단, Web Workers 는 DOM API 나 window 객체에 직접 접근할 수 없으며, 메인 스레드와 Wo…
8 min read
Web Workers API 개요 및 기본 사용법
Source
Evernote/Inbox/Pro HTML5 Programming Chapter 10 Using the Web Workers API.md
Summary
JavaScript 의 단일 스레드 구조로 인한 UI 블로킹 문제를 해결하기 위해 HTML5 Web Workers API 가 도입되었습니다. Web Workers 는 별도의 스레드에서 백그라운드 처리를 수행하여 CPU 다중 코어를 활용하고 느린 스크립트 경고 (slow-script warnings) 를 방지합니다. 단, Web Workers 는 DOM API 나 window 객체에 직접 접근할 수 없으며, 메인 스레드와 Worker 간 통신은 postMessage 메서드를 통해 비동기적으로 이루어집니다. 브라우저 지원 여부는 typeof(Worker) !== ‘undefined’로 확인 가능하며, Worker 생성 시 실행할 JavaScript 파일의 URL(동일 출처) 을 지정해야 합니다.
Key Points
JavaScript 는 단일 스레드이므로 장시간 계산 작업은 UI 를 블로킹하며, Web Workers 는 이를 별도의 스레드에서 처리하여 UI 응답성을 유지합니다.
Web Workers 는 DOM(window.document) 에 직접 접근할 수 없으며, 메인 페이지와 Worker 간 데이터 교환은 postMessage 및 메시지 이벤트 리스너를 통해 수행됩니다.
브라우저 지원 확인은 typeof(Worker) !== ‘undefined’ 조건으로 가능하며, 지원되지 않는 경우 폴백 처리가 필요합니다.
Worker 는 new Worker(‘script.js’) 형태로 생성되며, 실행 파일은 메인 페이지와 동일한 출처 (same-origin) 를 가져야 합니다.
Web Workers 에 대한 폴리필 (emulation) 은 의미가 없으므로, 지원되지 않는 브라우저에서는 코드 인라인 실행 (UI 블로킹 발생) 또는 브라우저 업그레이드 유도 전략이 필요합니다.