Worker

Web Workers API Worker 인터페이스는 스크립트로 생성하고, 생성자와 메시지로 통신하는 백그라운드 작업을 나타냅니다. 워커의 생성은 Worker("path/to/worker/script") 생성자를 통해 할 수 있습니다.

워커는 부모 페이지와 같은 출처에 호스팅 된 다른 워커를 생성할 수 있습니다. (참고: WebKit은 아직 중첩 워커를 구현하지 않았습니다.)

Worker 내에서 사용할 수 있는 인터페이스와 함수는 제한돼있습니다. 워커는 XMLHttpRequest를 사용해 네트워크 통신을 할 수 있지만, 응답의 responseXMLchannel 특성은 항상 null입니다. (fetch는 이러한 제한 없이 사용할 수 있습니다.)

생성자

Worker()
주어진 URL의 스크립트를 실행하는 전용 웹 워커를 생성합니다. Blob URL도 사용할 수 있습니다.

속성

부모 EventTarget에서 속성을 상속하고, AbstractWorker의 속성을 구현합니다.

이벤트 처리기

AbstractWorker.onerror
error 유형의 ErrorEvent가 워커로 확산되면 호출할 EventListener입니다. AbstractWorker에서 상속합니다.
Worker.onmessage
message 유형의 MessageEvent가 워커로 확산되면, 즉 DedicatedWorkerGlobalScope.postMessage를 통해 워커에서 부모 문서로 메시지를 전송하면 호출할 EventListener입니다. 메시지는 data 속성에 들어있습니다.
Worker.onmessageerror
messageerror 이벤트가 발생하면 호출할 EventHandler입니다.

메서드

부모 EventTarget에서 메서드를 상속하고, AbstractWorker의 메서드를 구현합니다.

Worker.postMessage()
워커의 내부 범위로 메시지를 전송합니다. 메시지는 임의의 JavaScript 객체입니다.
Worker.terminate()
워커를 즉시 종료합니다. 현재 워커가 연산을 진행 중이더라도 완료를 기다리지 않습니다. ServiceWorker 인스턴스는 이 메서드를 지원하지 않습니다.

이벤트

message
워커의 부모가 워커로부터 메시지를 수신했을 대 발생합니다.
onmessage 속성에서도 사용 가능합니다.
messageerror
Worker 객체가 역직렬화 할 수 없는 객체를 메시지로 받았을 대 발생합니다.
onmessageerror 속성에서도 사용 가능합니다.
rejectionhandled
Promise가 거부될 때마다 발생합니다. 거부를 처리할 처리기의 존재 유무는 고려하지 않습니다.
onrejectionhandled 속성에서도 사용 가능합니다.
unhandledrejection
Promise가 거부됐는데, 처리할 처리기가 없을 때 발생합니다.
onunhandledrejection 속성에서도 사용 가능합니다.

예제

다음 코드 조각은 Worker() 생성자를 사용해 Worker 객체를 생성한 후, 그 Worker를 사용합니다.

var myWorker = new Worker("worker.js");
var first = document.querySelector('#number1');

first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

전체 예제를 보시려면 저희의 simple-web-worker 예제 (라이브)를 참고하세요.

명세

Specification Status Comment
HTML Living Standard
The definition of 'Worker' in that specification.
Living Standard

브라우저 호환성

워커의 종류마다 지원 상황이 다릅니다. 각각의 페이지를 방문해 더 자세히 알아보세요.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
WorkerChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 10Opera Full support 10.6Safari Full support 4WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
Worker() constructorChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 10Opera Full support 10.6Safari Full support 4WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
message eventChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 10Opera Full support 10.6Safari Full support 4WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11.5Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
messageerror eventChrome Full support 60Edge Full support 18Firefox Full support 57IE ? Opera Full support 47Safari ? WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 57Opera Android Full support 47Safari iOS ? Samsung Internet Android Full support 8.0
onmessageChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 10Opera Full support 10.6Safari Full support 4WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
onmessageerrorChrome Full support 60Edge Full support 18Firefox Full support 57IE No support NoOpera Full support 47Safari ? WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 57Opera Android Full support 44Safari iOS ? Samsung Internet Android Full support 8.0
postMessageChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer does not support Transferable objects.
Opera Full support 47Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support 44Safari iOS Full support YesSamsung Internet Android Full support Yes
terminateChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 10Opera Full support 10.6Safari Full support 4WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

교차 출처에서의 워커 오류 동작

초기 명세에서는 교차 출처 워커 스크립트를 불러오려 시도하면 SecurityError가 발생했습니다. 요즘은 오류 대신 error 이벤트가 발생합니다. 이 글에서 교차 출처 처리 방법을 알아보세요.

같이 보기