내용 보기

작성자

관리자 (IP : 172.17.0.1)

날짜

2020-09-09 04:26

제목

[TypeScript] 병렬 처리를 위한 웹 워커(Web Worker)

웹 워커(Web Worker)

타입스크립트는(자바스크립트) 기본적으로 한 개의 CPU 스레드에서 실행하는 싱글 스레드의 비동기
방식으로 동작 된다.
웹 워커를 사용하면 브라우저에서의 멀티 스레딩 작업을 지원하여 병렬 처리 동작이 가능하다.
웹 워커를 생성하면 새로운 워커 스레드를 생성되고 해당 작업은 워커 스레드에서 처리된다.

※ 참고로 웹 워커는 브라우저의 API고, node.js에서는 worker_threads모듈로 사용 가능하다.

워커는 메인 스레드가 아닌 별도의 워커 스레드로 실행되고, 직접적으로 브라우저의 DOM에 접근할 수 없기 때문에
서로간의 메세지 전달(postMessage)로 작업을 처리한다.

싱글 스레드 처리 예제
<div id="result"></div>
<button id="btn">run</button>
<script>
  function sleep(delay) {
    var start = new Date().getTime();
    while (new Date().getTime() < start + delay);
  }
 
  document.querySelector('#btn').addEventListener('click', function () {
    sleep(3000); // 3초가 걸림을 표현
    var div = document.createElement('div');
    div.textContent = Math.random();
    document.querySelector('#result').appendChild(div);
  });
</script>
cs


병렬 처리 예제
<div id="result"></div>
<button id="btn">run</button>
<script>
  document.querySelector('#btn').addEventListener('click', function () {
    var worker = new Worker('./worker.js'); // 워커 메세지 수신
    worker.addEventListener('message', function(e) {
      var div = document.createElement('div');
      div.textContent = e.data; // 0.1238917491
      document.querySelector('#result').appendChild(div); // 워커 종료
      worker.terminate();
    }); // 워커 메세지 전달
    worker.postMessage('일해라 워커!');
  });
</script>
cs
[worker.js]
function sleep(delay) {
 var start = new Date().getTime();
 while (new Date().getTime() < start + delay);
}
self.addEventListener('message', function(e) {
  console.log(e.data); // 일해라 워커!
  sleep(3000); // 3초가 걸림을 표현
  var coords = Math.random();
  console.log(coords); // 메인 스레드에게 메세지 전달
  self.postMessage(coords);
});
cs

워커 안에서 또 다른 워커를 불러오는 것도 가능하다.

self.addEventListener('message', function(e) {
  var a = 'ignored';
 
  // worker2.js 불러옴
  importScripts('./worker2.js'); // worker2의 a값 출력
  console.log(a); // hello worker!
});
cs
[worker2.js]
// self에 변수를 정의해야 다른 워커에서 해당 변수에 접근이 가능하다.
self.a = 'hello worker!';
cs


웹 워커는 추가적으로 몇 가지 제약 사항이 있고 브라우저 별로 제약이 있다.
제약 사항은 MDN페이지(웹 워커)에서 확인 가능하다.

추가로 크롬, 마이크로 엣지브라우저와 오페라 브라우저에서는 워커 로컬 파일 로드에 제약이 있어
해당 워커 js파일 로드시 'cannot be accessed from origin' 오류가 발생된다.

출처1

https://www.zerocho.com/category/HTML&DOM/post/5a85672158a199001b42ed9c

출처2

https://melius.tistory.com/58

(0 Bytes)
목록