web worker

개발중인 web 3D viewer에서 용량이 큰 3D model을 load하는 과정에서 웹페이지가 freezing되는 현상이 발생했다. 이것을 해결하기 위해, 웹에서 백그라운드 스레드를 사용하여 해결하고자 리서치하고 간단한 내용만 정리한다.

 

Web Worker란?

 

웹에서의 백그라운드 스레드 이다.

메인 실행 스레드와 별도로 백그라운드에서 실행되는 HTML 페이지로부터 수행되는 javascript 메인스레드와 Workers는 메세지를 통해 데이터를 교환한다.

이 Workers는 메인 실행 스레드와 구별되어 실행되므로, Web Workers를 활용하여 Instance Blocking 없이 process intensive task들을 처리할 수 있다.

 

1) worker에서는 document, window와 같은 global scope를 main thread와 공유할 수 없으며, 사용할 수 없다.

또한 worker에서는 ui단인 dom관련 조작을 직접적으로 할 수 없다.

 

2) worker와 main의 통신 수단인 postMessage로는 기본적으로 String, Array, 단순 Object 형태만 전달이 가능하며, 함수를 지닌 객체 를 전달할 수 없다. - 이것 땜에 방법 고생..

 

3) Transferable 객체들을 메세지와 전달 할 수 있긴 하다.

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

 

4) 함수가 없는 Object를 전달한다해도 받는 쪽에서 보냈던 특정 객체로 인식하지 못하기에...

받는 쪽에서 다시 가공이 좀 필요했다 - Object.asign 이용

 

5) main에선 terminate( ) , worker에선 close( )로 worker를 종료시킬 수 있다.

 

 

web worker 문서

참고 : https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Using Web Workers

worker 관련 문서

참고 : https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

Window.postMessage()

webpack 환경에서 worker 사용 위해 필요한 모듈 worker-loader

참고 : https://webpack.js.org/loaders/worker-loader/

worker-loader | webpack

예제 : https://medium.com/techtrument/multithreading-javascript-46156179cf9a

Multithreading Javascript