브라우저의 다중 스레딩이라고도 하는 웹 작업자 소개

소개

웹 작업자는 백그라운드에서 별도의 스레드에서 실행되는 스크립트입니다.

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. (from MDN docs)

Javascript는 단일 스레드 프로그래밍 언어이므로 명령을 단계별로 순차적으로 실행합니다.
코드가 많은 시간이 소요되는 값비싼 작업을 실행하는 경우. 그러면 컨트롤이 해당 단계에서 나올 때까지 다른 자바스크립트 코드를 실행할 수 없습니다. 이는 현재 스레드가 해당 단계를 실행 중이고 javascript가 단일 스레드 언어이기 때문입니다.
해당 단계가 실행되는 동안 자바스크립트가 필요한 작업에 대해 UI가 응답하지 않도록 하는 자바스크립트를 실행할 수 없으며 이는 분명히 나쁜 사용자 경험입니다.

javacsript가 다중 스레드였다면 이 문제에 직면하지 않았을 것입니다. 하지만 그렇지 않습니다. 웹 브라우저를 사용하여 스레드를 만들 수 있다면 어떨까요? ....웹 워커가 탄생했습니다.

각 웹 작업자는 별도의 OS 스레드 및 실행 컨텍스트에서 실행됩니다.

코딩을 시작합시다!

// Check if the Web Workers are supported by the browser
if (window.Worker) {
  // Create a new Web Worker
 //Pass the URI of the script which has to run as a web worker to the Worker Constructor
  const myWorker = new Worker('worker.js'); 
}

작업자 스크립트(이 경우 worker.js) 내부는 console.log만큼 간단할 수 있습니다.

console.log("Running in a separate thread");

메인 스레드와 작업자 스레드는 메시지를 통해 상호 작용합니다.

웹 작업자의 self는 작업자 실행 컨텍스트 인스턴스를 나타냅니다. 우리는 나중에 다시 자신으로 돌아올 것입니다.

메시지 보내기

작업자의 postMessage 메소드를 통해 메인 스레드에서 작업자 스레드로 메시지를 보냅니다.
작업자 스크립트의 메시지는 단순히 postMessage(message) 또는 self.postMessage(message)를 호출하여 메인 스레드로 보낼 수 있습니다.

메시지 듣기

작업자 인스턴스의 onmessage 메소드는 작업자가 메인 스레드에 메시지를 보낼 때 실행됩니다.
작업자 스크립트의 self.onmessage 또는 onmessage 함수는 기본 스레드가 메시지를 보낼 때 실행됩니다.
onmessage 이벤트 리스너 함수는 MessageEvent 의 인스턴스를 허용합니다.

앱.js

const myWorker = new Worker('worker.js'); 
console.log("[Inside Main thread] Sending Message to Worker thread");
myWorker.postMessage("Hello Web Worker");
myWorker.onmessage = function (message) {
  console.log("[Inside Main thread] Message sent by Web Worker - ",message.data);
}

작업자.js

//onmessage is implicitly self.onmessage
onmessage = function (message){
  console.log("[Inside WebWorker] Message sent by Main thread - ", message.data);
 console.log("[Inside WebWorker] Sending Message to Main Thread");
  postMessage("Hello Main Thread");
}

출력( 콘솔 로그 )

[Inside Main thread] Sending Message to Worker thread
[Inside WebWorker] Message sent by Main thread - Hello Web Worker
[Inside WebWorker] Sending Message to Main Thread
[Inside Main thread] Message sent by Web Worker - Hello Main Thread

웹 작업자 스크립트 내에서 모든 브라우저 API에 액세스할 수는 없으며 이는 좋은 일입니다. 웹 작업자 내부에서 IndexedDB, Web Sockets와 같은 브라우저 API에 액세스할 수 있습니다. DOM을 직접 조작하거나 액세스할 수 없습니다. Complete list of Browser api supported inside web worker .

웹 작업자의 유형

Dedicated Web Worker (앞서 본 것)

공유 웹 작업자

전담 웹 워커

웹 작업자 인스턴스는 생성한 스크립트에서만 액세스할 수 있습니다.

공유 웹 작업자

웹 작업자 인스턴스는 모든 스크립트에서 액세스할 수 있습니다.

추가 읽을거리

MDN docs에서 웹 작업자에 대해 자세히 알아보십시오.