Web Workers

* Web Workers란?

- JavaScript에서 시간이 걸리는 처리를 수행하면 화면이 멈추고 사용자가 기다려야 하는 일이 있음.

- Web Workers는 이러한 무거운 처리를 백그라운드에서 수행하게 함으로써 사용자와의 통신에 영향을 주지 않도록 할 수 있음.

 

[전용 워커와 공유 워커]

 

- Web Workers에서는 백그라운드 처리를 '워커'라 부르는 실행 단위를 사용하여 수행함.

- 워커에는 두 가지 종류가 있음.

1) 전용 워커 : 자신의 생성처하고만 통신을 함.

2) 공유 워커 : 여러 상대와 통신을 할 수 있음.

 

[데이터 송수신]

 

- 데이터를 송수신하는 방법은 워커 측과 호출하는 측이 똑같음.

 

송신 측 -------------------------------------- 데이터 --------------------------------------> [data|  ] 수신 측   // message 이벤트 발생.

         postMessage(메시지) 메서드를 호출                                       이벤트 인수인 data 프로퍼티에 송신한 데이터가 저장됨.

 

* 전용 워커 이용하기

- 전용 워커를 이용하려면 워커에 대한 클라이언트가 되는 Worker 오브젝트를 작성해야 함.

- 그때그때 새롱누 전용 워커가 생성되며, 인수로 지정된 파일의 실행을 백그라운드에서 시작함.

 

var worker = new Worker("script.js");        // Worker 오브젝트

worker.onmessage = function(event) {

var message = event.data;

워커로부터 메시지를 받았을 때의 처리

}

worker.postMessage("송신 메시지");         // 워커에게 보내는 메시지 송신

 

- 전용 워커로 실행되는 코드 환경에서는 postMessage(메시지) 메서드와 onmessage 이벤트 핸들러가 정의되어 있으며, 이를 사용하여 워커의 생성처와 데이터를 주고 받음.

 

onmessage = function(event) {

var message = event.data;

메시지를 받았을 때의 처리

}

postMessage("송신 메시지");            // 메시지의 송신

 

 

[워커의 실행 환경]

 

- 전용이든 공유이든 모두 워커로 실행되는 코드에서는 window나 document와 같은 도큐먼트 관련 요소에는 액세스할 수 없음.

- 실제로 이용할 수 있는 것은 언어 내장 변수/함수나 아래의 프로퍼티/메서드뿐임.

 

프로퍼티/메서드	기능
self	톱 레벨의 기본 오브젝트를 나타냄.
location	실행 중인 파일의 위치가 저장되어 있음.
navigator	window.navigator와 거의 비슷함.
importScripts(urls)	지정된 파일을 읽어 들여 실행함.
setTimeout(handler, [timeout])	타이머를 설정함.
clearTimeout(id)	타이머를 클리어함.
setInterval(handler, [timeout])	정기 타이머를 설정함.
clearInterval(id)	정기 타이머를 클리어함.

 

 

* 공유 워커 이용하기

- 공유 워커를 이용하려면 클라이언트가 되는 SharedWorker 오브젝트를 만들어야 함.

- 이미 동일한 파일을 실행하고 있는 공유 워커가 있는 경우에는 접속만 일어나고, 그렇지 않은 경우는 신규로 공유 워커가 생성됨.

 

var worker = new SharedWorker("scripts.js");

 

- 공유 워커의 경우 데이터 송수신에는 SharedWorker 오브젝트 자체가 아니라 port 오브젝트를 통해 수행함.

- port 오브젝트는 특정 접속처와 공유 워커와의 전용 통신채널임.

 

var port = worker.port;            // port 오브젝트

port.onmessage = function(event) {

var message = event.data;

워커로부터 메시지를 받았을 때의 처리

}

port.postMessage("송신 메시지");            // 워커에게 보낼 메시지 송신

 

- 공유 워커로 실행되는 코드 환경에서는 초기 접속 시에 실행되는 onconnect 이벤트 핸들러가 정의되어 있음.

- 데이터는 이 이벤트의 인수인 'event.ports[0]'에 저장된 port 오브젝트를 통해 송수신함.

 

onconnect = function(event) {

var port = event.ports[0];        // 접속해 온 클라이언트 전용 port를 구함. 배열 event.ports에는 이 port만 저장되어 있음.

port.onmessage = function (event) {

var message = event.data;

메시지를 받았을 때의 처리

}

port.postMessage("송신 메시지");            // 메시지 송신

};

 

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
Web Workers	X	O	O	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)