웹 작업자 개요

참고: 이 모듈에서는 웹 작업자의 작동 방식을 개략적으로 설명합니다. 웹 작업자를 포괄적으로 설명하는 것이 아니라 웹 작업자를 간략하게 설명하며 웹 작업자가 성능을 어떻게 개선할 수 있는지에 관한 후속 데모를 보여줍니다. 이 주제에 대해 자세히 알아보려면 웹 작업자를 사용하여 브라우저의 기본 스레드에서 JavaScript 실행을 읽어보세요.

지금까지 이 과정의 콘텐츠는 일반적인 HTML 성능 고려사항, 리소스 힌트, 초기 페이지 로드 시간 및 사용자 입력에 대한 응답성을 개선하기 위한 다양한 리소스 유형 최적화, 특정 리소스의 지연 로드와 같은 개념에 중점을 두었습니다.

그러나 JavaScript와 관련된 성능의 한 가지 측면은 이 과정에서 아직 다루지 않습니다. 이것이 입력 응답성을 개선하는 데 있어 웹 작업자의 역할입니다. 이 내용과 다음 모듈에서 다룹니다.

JavaScript는 단일 스레드 언어로 설명되는 경우가 많습니다. 실제로 이는 기본 스레드를 가리키며, 이는 브라우저에 표시되는 대부분의 작업을 브라우저가 실행하는 단일 스레드입니다. 이러한 작업에는 스크립팅, 일부 유형의 렌더링 작업, HTML 및 CSS 파싱, 사용자 환경을 주도하는 기타 유형의 사용자 대상 작업과 관련된 작업이 포함됩니다. 실제로 브라우저는 GPU 스레드와 같이 개발자가 일반적으로 직접 액세스할 수 없는 작업을 실행하기 위해 다른 스레드를 사용합니다.

JavaScript의 경우 일반적으로 기본 스레드에서만 작업을 실행하게 됩니다. JavaScript에서 추가 스레드를 등록하고 사용할 수 있습니다. JavaScript에서 멀티 스레딩을 허용하는 기능을 Web Workers API라고 합니다.

웹 작업자는 긴 작업을 유발하지 않고 기본 스레드에서 실행할 수 없고 페이지를 응답하지 않는 계산 비용이 많이 드는 작업이 있을 때 유용합니다. 이러한 작업은 웹사이트의 다음 페인트에 대한 상호작용 (INP)에 확실히 영향을 줄 수 있으므로 기본 스레드에서 완전히 실행할 수 있는 작업이 있을 때 이를 알면 도움이 될 수 있습니다. 이렇게 하면 기본 스레드에서 다른 작업을 위한 공간을 더 많이 만들어 사용자 상호작용이 더 빨라집니다.

이 모듈과 구체적인 사용 사례를 보여주는 후속 데모에서는 웹 작업자를 다룹니다. 데모는 웹 워커를 사용하여 기본 스레드에서 벗어나 JPEG 파일에서 이미지 메타데이터를 읽는 작업을 실행하는 방법과 해당 메타데이터를 사용자가 볼 수 있도록 기본 스레드로 다시 가져오는 방법을 보여줍니다.

웹 작업자 시작 방법

웹 작업자는 Worker 클래스를 인스턴스화하여 등록됩니다. 이때 웹 작업자 코드의 위치를 지정해야 합니다. 그러면 브라우저가 로드한 후 이에 따라 새 스레드가 생성됩니다. 이러한 결과로 생성되는 스레드를 작업자 스레드라고 합니다.

const myWebWorker = new Worker('/js/my-web-worker.js');

그런 다음 작업자의 JavaScript 파일(이 경우 my-web-worker.js)에서 별도의 작업자 스레드에서 실행되는 코드를 작성할 수 있습니다.

웹 작업자 제한사항

기본 스레드에서 실행되는 JavaScript와 달리 웹 작업자는 window 컨텍스트에 직접 액세스할 수 없으며 컨텍스트에서 제공하는 API에 대한 액세스가 제한됩니다. 웹 작업자에게는 다음과 같은 제약 조건이 적용됩니다.

• 웹 작업자는 DOM에 직접 액세스할 수 없습니다.
• 웹 작업자는 메시징 파이프라인을 통해 window 컨텍스트와 통신할 수 있습니다. 즉, 웹 작업자가 특정 방식으로 DOM에 간접적으로 액세스할 수 있습니다.
• 웹 작업자 범위는 window가 아닌 self입니다.
• 웹 작업자 범위는 JavaScript 프리미티브와 구조는 물론 fetch와 같은 API와 상당히 많은 수의 다른 API에 액세스할 수 있습니다.

웹 작업자가 window와 통신하는 방법

웹 작업자는 메시징 파이프라인을 통해 기본 스레드의 window 컨텍스트와 통신할 수 있습니다. 이 파이프라인을 사용하면 기본 스레드와 웹 작업자를 오가며 데이터를 전달할 수 있습니다. 웹 작업자에서 기본 스레드로 데이터를 전송하려면 웹 작업자의 컨텍스트 (self)에 message 이벤트를 설정합니다.

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

그런 다음 기본 스레드의 window 컨텍스트에 있는 스크립트에서 또 다른 message 이벤트를 사용하여 웹 작업자 스레드에서 메시지를 수신할 수 있습니다.

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

참고: 기본 태스크에서는 웹 작업자의 메시징 파이프라인을 직접 사용해도 됩니다. 하지만 작업이 더 복잡해지기 시작할 때 이 작업을 단순화할 방법을 찾고 있다면 Comlink와 같은 추상화가 매우 유용할 수 있습니다.

웹 작업자의 메시징 파이프라인은 웹 작업자 컨텍스트에서 일종의 이스케이프 해치입니다. 이를 사용하면 DOM을 업데이트하거나 기본 스레드에서 실행해야 하는 다른 작업을 실행하는 데 사용할 수 있는 데이터를 웹 워커에서 window로 전송할 수 있습니다.

학습한 내용 테스트

웹 작업자는 어떤 스레드에서 실행되나요?

기본 스레드.

다시 시도해 주세요.

자체 스레드 (웹 작업자 스레드라고도 함)

정답입니다.

GPU 스레드.

다시 시도해 주세요.

웹 작업자는 어디에 액세스할 수 있나요?

자바스크립트 프리미티브(예: 배열 및 객체)

정답입니다.

window 컨텍스트에서 사용할 수 있는 엄격한 API 하위 집합(예: fetch)

정답입니다.

window 컨텍스트. 간접적으로만 가능

정답입니다.

웹 작업자가 `window` 컨텍스트에 액세스하려면 어떻게 해야 하나요?

window 객체의 멤버를 참조하여 직접 호출

다시 시도해 주세요.

웹 작업자는 어떤 방식으로도 window에 액세스할 수 없습니다.

다시 시도해 주세요.

웹 작업자 컨텍스트 (self)에서 postMessage 메서드로 지원되는 메시지 파이프라인을 통해

정답입니다.

다음: 구체적인 웹 작업자 사용 사례

다음 모듈에서는 구체적인 웹 작업자 사용 사례를 자세히 설명합니다. 이 모듈에서는 웹 작업자를 사용하여 지정된 URL에서 JPEG 파일을 가져오고 웹 작업자에서 Exif 메타데이터를 읽습니다. 그런 다음 이 데이터는 기본 스레드로 다시 전송되어 사용자에게 표시됩니다.