1. Web Worker

Web Worker는 백그라운드 스레드에서 스크립트를 실행할 방법을 제공함.

 

Javascript : 싱글 스레드에서 동작.

웹 브라우저 : 다중 스레드에서 동작함.

 

Web Worker는 브라우저의 메인 스레드와 별개로 작동되는 스레드를 생성 할 수 있다.

이러한 스레드는 브라우저 렌더링같은 메인 스레드의 작업을 방해하지않고, 새로운 스레드에서 스크립트를 실행하는 간단한 방법을 제공한다.

 

 

Web Worker 예제

var n = 'done';
// 오래걸리는
// 무언가를
// 처리함...
postMessage(n); // 데이터를 메인쓰레드의 .onmessage에게 전달

if( window.Worker ) {
        var worker = new Worker('worker.js');  // 워커 쓰레드 생성
        worker.onmessage = (event) => {  //워커의 메시지를 전달받기위한 이벤트 핸들러등록
            console.log(event.data); 
            // 'done'
            worker.terminate(); // 작업종료
        };
  }

 

Web Worker Scope

 

Web Worker 은 메인 스레드와 별도의 워커 스레드 를 가진다.

메인 스레드 에서는 window 가 GlobalScope 이지만 워커 스레드는 window 와는 별도의 WorkerGlobalScope 를 가진다. 때문에 Window 의 메서드나 DOM 조작이 불가능하다.

단, self 를 이용해서 WorkerGlobalScope 에 접근이 가능하다.

 

워커 스레드는 메인 스레드 의 window 에 직접 접근할 수 없고 DOM에 접근하기 위해선 반드시 Message System으로 데이터를 전달해야한다.

 

이때 전달하는 데이터는 복사하여 전달한다.

class Test {
    value = true;
    onAction() {}
}
const test = new Test();
postMessage(test);
// { value:  true }

test.value = false;
postMessage(test);
// { value:  false }

postMessage(() => {});
// Uncaught DOMException

 

Web Woreker Child Thread

 

워커 스레드 내에서 새로운 thread를 생성.

이때 워커 스레드는 메인 스레드의 오리진과 동일한데, 동일한 오리진을 가지는 javascript를 가져올 수 있으며, 새로운 워커 스레드를 만들 수 있다.

// worker.js

var sub_worker = new Worker('sub_worker.js');
sub_worker.onmessage = function (event) {  // 데이터 수신
    console.log('worker', event.data);
}
sub_worker.postMessage('test');

postMessage를 이용해 부모나 자식 스레드에게 데이터를 전달할 수 있으며, onmessage 를 이용하여 부모나 자식 스레드가 전달하는 데이터를 수신 할 수있다.

 

*postMessage : 데이터 전달

*onmessage : 데이터 수신

// sub_worker.js

onmessage = function (event) {
    console.log('sub_worker', event.data);
    postMessage(event.data); // 데이터 전달
}

 

Web Worker importScript

 

window의 스코프에 접근할 수 없기 때문에, 외부 라이브러리를 써야한다면 importScript를 사용하여 외부 스크립트를 가져올 수 있다.

importScript는 워커 스레드에만 영향을 준다.

// test1.js
var test1 = 'test1';

// test2.js
var test2 = 'test2';

// worker.s
importScripts('test1.js', 'test2.js');
console.log(test1, test2);
importScripts('index.html');
// Refused to execute script

 

Web Worker Error

워커 스레드 내에서 발생된 에러는 메인 스레드까지 전파되지 않는다.

 

Web Worker 종류

• Dedicated Worker: 처음 생성 한 스크립트에서만 사용
• Shared Worker: 여러 스크립트에서 사

 

 

https://medium.com/@pks2974/web-worker-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-4ec90055aa4d