Web Workers API

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

Web Worker는 script 실행을 메인 쓰레드가 아니라 백그라운드 쓰레드에서 실행할 수 있도록 해주는 기술 입니다. 이 기술을 통해 무거운 작업을 분리된 쓰레드에서 처리할 수 있으며, 이를 통해 메인 쓰레드(일반적으로 UI 쓰레드)는 멈춤, 속도저하 없이 동작할 수 있게 됩니다.

Web Worker의 개념과 활용

Worker는 Worker() 생성자를 통해 생성되며 지정된 Javascript 파일에 포함된 코드를 Worker 쓰레드에서 실행합니다. (Worker는 현재 Window와 분리된 DuplicatedWorkerGlobalScope라는 별도의 Global context에서 동작합니다.) Worker 쓰레드에서 어떠한 코드도 실행할 수 있지만, 몇가지 예외가 있습니다. 예를들어 Worker 내에서는 DOM을 직접 다룰 수 없습니다. 또한 Window의 기본 메서드와 속성을 사용할 수 없습니다. 보다 자세한 정보는 Functions and classes available to workers를 참조해주세요.

Message System을 통해 Worker와 메인 쓰레드 간에 데이터를 교환할 수 있습니다. Worker.postMessage() 메서드를 통해 데이터를 전송할 수 있으며, Worker.onmessage 이벤트 핸들러 Attribute를 통해 응답할 수 있습니다. (전송되는 메세지는 MessageEvent.data에 포함됩니다). 전송되는 데이터는 공유되지 않으며 복제를 통해 전달되게 됩니다.

부모페이지와 동일한 Origin 내에서 Worker는 새로운 Worker를 생성할 수 있습니다.  Worker들은 XMLHttpRequest를 통해 네트워크 통신을 할 수 있지만 XMLHttpRequest의 responseXML과 channel attribute는 항상 null을 반환합니다.

지금까지 알아본 Dedicated Worker와 다른 유형의 Worker들도 존재합니다.

  • Shared worker는 Worker가 동일한 도메인 내에 존재하는 여러 script에 의해 사용될 수 있습니다. Shared Worker는 Dedicated worker보다 좀더 복잡성을 가지고 있습니다. 예를들어 Script들은 반드시 활성화된 Port를 통해 통신해야 합니다. 좀더 자세한 정보는 SharedWorker를 확인해주세요.
  • ServiceWorker는 웹 어플리케이션 사이의 Proxy Server와 브라우저로서 역할을 하며 (만약 가능하다면)통신을 구축합니다. 이를 통해 효율적인 오프라인 경험을 구축하고, 네트워크 요청을 가로채어 통신이 가능한지 여부에 따라 적절한 동작을 수행하며,  서버에 존재하는 자원들을 갱신할 수 있습니다. 또한 푸시 알림이나 백그라운드 동기화 API에 접근을 허용합니다.
  • Chrome Worker는 Firefox에서만 사용 가능한 worker 유형입니다. Add-on을 제작할 때나 확장기능에서 Worker를 사용하고 싶을 때 사용할 수 있으며, Worker에서 js-ctypes에 접근할 수 있습니다. 상세한 정보를 위해 ChromeWorker를 확인해보세요.
  • Audio Workers는 스크립트를 통한 직접적인 오디오 처리를 Web Worker에서 처리할 수 있도록 해줍니다.

Web Worker interfaces

AbstractWorker
Abstracts properties and methods common to all kind of workers (i.e. Worker or SharedWorker).
Worker
Represents a running worker thread, allowing you to pass messages to the running worker code.
SharedWorker
Represents a specific kind of worker that can be accessed from several browsing context, being several windows, iframes or even workers.
WorkerGlobalScope
Represents the generic scope of any worker (doing the same job as Window does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features.
DedicatedWorkerGlobalScope
Represents the scope of a dedicated worker, inheriting from WorkerGlobalScope and adding some dedicated features.
SharedWorkerGlobalScope
Represents the scope of a shared worker, inheriting from WorkerGlobalScope and adding some dedicated features.
WorkerNavigator
Represents the identity and state of the user agent (the client):

Examples

We have created a couple of simple demos to show basic usage:

You can find out more information on how these demos work in our Using web workers guide; in addition you can visit our Web workers Advanced concepts and examples page for more examples.

Specifications

Specification Status Comment
WHATWG HTML Living Standard Living Standard No change from Web Workers.
Web Workers Editor's Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 Unknown (3.5) 10.0 10.6 4
Shared workers 4 29 (29) No support 10.6 4
Passing data using structured cloning 13 8 (8) 10.0 11.5 6
Passing data using  transferable objects 17 webkit
21
18 (18) No support 15 6
Global URL 10 as webkitURL
23
21 (21) 11 15 6 as webkitURL
Feature Android Chrome Mobile Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 4 3.5 1.0.1 10.0 11.5 5.1
Shared workers 4 8 1.0.1 No support
Passing data using structured cloning 4 8 1.0.1 No support
Passing data using  transferable objects 18 1.0.1 No support

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: thankee, chrisdavidmills
 최종 변경: thankee,