[ vanilla js ] Web Worker API (개념편)

*Reference:

 

https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API

Web Workers API - Web API | MDN

---

Web Worker API

웹페이지에서 실행중인 주 스레드와 별개의 백그라운드 스레드에서 스크립트를 실행할 수 있는 기술

별개의 스레드에서 처리가 가능하므로 무거운 작업으로 인한 이벤트 리스닝 지연 등을 방지할 수 있음.

 

*주의

 

1) window의 일부 메소드 사용 불가 (https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)

2) DOM을 워커 내에서 직접 조작 불가

 

 

사용

 

워커의 종류는 2가지로 나뉘어집니다. 만약 워커가 하나의 스크립트에서만 쓰인다면, 전용워커를 사용해야합니다. 전용워커는 아래와 같이 정의합니다:

const myWorker = new Worker(workerRoute)

 

만약 워커가 하나의 스크립트가 아닌 2개 이상의 스크립트에서 쓰인다면, 공유워커를 사용해야합니다.

공유워커는 아래와 같이 정의합니다:

const myWorker = new SharedWorker(workerRoute)

 

 

1. 전용워커: 메인-워커간 통신

* 편의를 위해 워커가 워커를 호출하는 경우를 고려하지 않음. 워커가 워커를 호출하는경우, 스레드간 이해관계가 메인스레드에서 부모스레드로 치환됨.

 

전용워커에서 메세지를 전송할때는 postMessage() 메소드를 사용합니다. 이때 값을 여러개 보낸다면, 배열로 보내야합니다.

myWorker.postMessage(values)

 

 

 

보낸 메세지를 워커 안에서 받기 위해서는 onmessage를 통해 핸들러를 등록하고, 핸들러 안의 e.data에서 받을 수 있습니다.

onmessage = function(e) {
	const { data } = e;
}

 

반대로 워커에서 메인스레드로 메세지를 보낼때도 postMessage() 메소드를 사용합니다.

 

postMessage(message);

 

 

메인 스레드에서 워커의 메세지를 받을 때는 myWorker.onmessage에 핸들러를 등록하여 처리합니다. 메세지는 동일하게 e.data에 있습니다.

 

myWorker.onmessage = function(e) {
	const { data } = e;
}

 

 

 

2. 전용워커: 워커 삭제

 

메인스레드에서 워커를 삭제할때는 worker.terminate() 메소드를 사용합니다.

myWorker.terminate();

 

워커 안에서 자기 자신을 삭제할 때는 close() 메소드를 사용합니다.

 

close();

 

 

3. 공유워커: 워커간 통신

* 여기부터는 부모-자식 스레드를 고려하여 설명합니다.

 

공유워커는 전용워커와 달리 통신을 위해 port 객체를 통과해야만 합니다. port의 연결은 start() 메소드를 통해 시작되며, 반드시 우선 실행되어야 합니다.

 

따라서 모든 호출을 port 객체가 가지고 있는 메소드를 통해 호출하며, 이것 이외에 다른점은 없습니다. 

가령 전용워커에서 onmessage로 사용되었던 것은 port.onmessage로 사용됩니다. 이 적용사항은 부모스레드와 자식스레드에 모두 적용됩니다.

 

 

---

 

port의 연결은 2가지 방식으로 처리될 수 있습니다.

만약 onmessage 이벤트 핸들러를 통해 이 워커가 실행된다면 연결은 암묵적으로 시작되기때문에 더이상 신경 쓸 필요가 없습니다.

하지만 만약 addEventListener() 메소드와 연관되어 메세지 이벤트가 호출된다면 start() 메소드를 사용하여 연결을 처리할 필요가 있습니다.

 

start() 메소드는 다음과 같이 사용합니다:

 

부모 스레드에서:

myWorker.port.start();

 

자식 스레드에서 (=워커 안에서):

port.start();

---