웹 작업자 개요

<ph type="x-smartling-placeholder">

</ph> 참고: 이 모듈은 웹 작업자가 어떻게 작동하는지 설명하는 모듈입니다. 개괄적으로 살펴보겠습니다 완전한 설명은 아니지만 웹 작업자에 대한 개요와 후속 데모로 어떻게 하면 실적을 개선할 수 있는지 알아보겠습니다. 주제에 대한 자세한 내용은 웹 워커를 사용하여 외부에서 JavaScript를 브라우저의 기본 스레드입니다.

지금까지 이 과정의 콘텐츠 대부분은 일반적인 HTML 성능 고려사항, 리소스 힌트, 다양한 최적화 초기 페이지 로드 시간과 사용자에 대한 응답성을 개선하기 위한 리소스 유형 특정 리소스의 지연 로드를 지원합니다.

하지만 JavaScript에서 아직 구현되지 않은 이것이 바로 웹 작업자의 역할과 성능 향상에 있어 입력 응답성에 관해 알아보겠습니다.

JavaScript는 단일 스레드 언어로 설명되는 경우가 많습니다. 실제로 이것은 는 브라우저가 작업을 실행하는 단일 스레드인 기본 스레드를 나타냅니다. 대부분의 작업을 처리할 수 있습니다 이 작업에는 예를 들어 스크립팅, 렌더링 작업 유형, HTML 및 CSS 파싱, 사용자 경험을 향상하는 사용자 대면 작업이 포함됩니다. 사실, 브라우저는 다른 스레드를 사용하여 작업을 실행하지만 개발자가 일반적으로 GPU 스레드와 같이 직접 액세스할 수 있습니다.

JavaScript와 관련된 경우에는 일반적으로 기본 스레드에 있습니다. 하지만 기본적으로만 해당합니다. Google Cloud SDK를 등록 및 사용할 수 있습니다. 추가 스레드가 필요합니다. Java, Python 등과 같은 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를 참고하세요.

웹 작업자가 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);
});

드림 <ph type="x-smartling-placeholder">

</ph> 참고: 기본 작업의 경우 웹 작업자의 메시지 아마도 괜찮을 것입니다 그러나 상황이 점점 복잡해지기 시작하면 이 작업을 단순화하기 때문에 예: Comlink 유용할 수 있습니다

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

학습한 내용 테스트

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

기본 스레드

다시 시도하세요.

자체 스레드 (웹 워커 스레드라고도 함).

정답입니다.

GPU 스레드입니다.

다시 시도하세요.

웹 작업자는 무엇을 액세스할 수 있나요?

배열 및 객체와 같은 JavaScript 프리미티브

정답입니다.

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

정답입니다.

window 컨텍스트. 단, 간접적으로만.

정답입니다.

웹 작업자는 어떻게 `window` 컨텍스트에 액세스할 수 있나요?

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

다시 시도하세요.

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

다시 시도하세요.

postMessage에서 지원하는 메시지 파이프라인을 통해 메서드 (self)로 대체해야 합니다.

정답입니다.

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

다음 모듈에서는 구체적인 웹 작업자 사용 사례를 자세히 설명하고 확인할 수 있습니다 이 모듈에서 웹 워커는 웹 작업자에서 Exif 메타데이터를 읽을 수 있습니다. 그런 다음 해당 데이터는 기본 스레드로 다시 돌아가 사용자에게 표시됩니다.