웹 작업자란 무엇이며 최적화된 프런트엔드 성능을 위해 이를 활용하는 방법

안녕하세요 여러분, 바이닐이 또 왔습니다! ?

내 블로그에 다시 오신 것을 환영합니다. 꽤 오랜 시간이 흘렀다는 건 알지만, 올해 진행한 프로젝트 중 하나인 스마트 법적 계약의 초안 작성, 테스트 및 실험에 사용되는 템플릿 놀이터를 작업하면서 최근 발견하고 배운 내용을 공유하게 되어 기쁩니다. 그리고 문서. 오늘은 Web Worker: 정의, 작동 방식, 프런트엔드 프로젝트 강화를 위해 이를 사용하는 방법

에 대해 자세히 알아보겠습니다.

그래서 당신이 맥주를 마시기 위해 바에 있고 바텐더(메인 스레드)가 주문을 받고, 주문을 준비하고, 카운터를 청소하는 일을 모두 동시에 수행해야 한다고 가정해 보겠습니다. 복잡한 주문(과중한 계산)을 처리하느라 바쁘다면 줄을 선 다른 모든 사람들이 기다려야 합니다. 실망스럽죠? 이제 바텐더가 주문을 받고 만드는 데 집중하는 동안 백그라운드에서 파인트 잔을 청소하고 정리하는 일을 담당하는 보조자(웹 작업자)가 있다고 상상해 보십시오. 이러한 팀워크는 보다 원활한 운영을 보장합니다.

간략한 개요입니다. 설명에서 API를 생각할 수도 있다는 것을 압니다. ㅋㅋㅋ, 아니요, 그렇지 않습니다! 바로 들어가 보겠습니다.

웹 작업자란 무엇입니까?

웹 개발에 있어서 Web Worker는 바로 그 어시스턴트와 같습니다. 백그라운드에서 무거운 작업을 처리하여 기본 스레드를 해제하여 앱의 반응성과 원활한 상태를 유지합니다. 이 기사에서는 Web Worker에 대해 자세히 알아보고, 주요 기능을 살펴보고, 탐색 방법을 설명하고, 세 가지 실제 시나리오를 사용하여 프런트엔드 개발에서 Web Workers의 강력한 기능을 보여줍니다. 또한 여기서 주요 사용 사례는 React이기 때문에 Vue와 같은 다른 프레임워크에서 Web Workers를 사용하는 방법에 대한 팁도 제공하겠습니다.

세 가지 유형의 웹 작업자

Web Workers 사용 방법을 알아보기 전에 세 가지 주요 유형을 이해해 보겠습니다.

전담 워커: 이는 단일 스크립트에만 적용되며 가장 일반적으로 사용되는 워커입니다. 백그라운드 계산이나 하나의 앱 인스턴스에 대한 API 호출 처리와 같은 작업에 적합합니다.

예: 특정 사용자 세션에 대한 데이터 압축

공유 작업자: 여러 스크립트나 브라우저 탭 간에 공유할 수 있으므로 탭 간 데이터 동기화와 같이 탭 간 통신이 필요한 작업에 이상적입니다.

예: 여러 브라우저 탭에서 사용자 세션 데이터를 일관되게 유지합니다.

서비스 워커: Dedicated Workers와 Shared Workers와 달리 이들은 네트워크 요청을 가로채서 앱과 네트워크 사이의 프록시 역할을 합니다. 일반적으로 캐싱 및 오프라인 지원에 사용됩니다.

예: 사용자가 오프라인일 때 캐시된 템플릿 제공

MDN의 Web Workers 문서에서 이러한 유형에 대해 자세히 알아볼 수 있습니다.

어떤 작업자를 사용할지 알아보려면 작업 범위를 고려하세요.

• 격리된 단일 스크립트 작업에는 전담 작업자를 사용하세요.

• 멀티탭 통신을 위해 공유 작업자를 사용하세요.

• 캐싱이나 오프라인 기능과 같은 네트워크 관련 작업에 서비스 워커를 사용하세요.

Web Worker의 주요 장점은 이러한 작업을 메인 스레드에서 오프로드하여 원활한 사용자 경험을 보장할 수 있다는 것입니다. 메인 스레드와 작업자 간의 통신은 postMessage 및 onmessage API를 사용하는 메시징 시스템을 통해 이루어집니다.

주요 웹 작업자 기능

• onmessage: 기본 스레드에서 작업자로 전송된 메시지를 처리합니다.

self.onmessage = (event) => {
  console.log('Message received from main thread:', event.data);
};

• postMessage: 작업자의 메시지를 다시 메인 스레드로 보냅니다.

self.postMessage('Task completed');

• 종료: 작업자 실행을 중지합니다.

worker.terminate();

• 오류 처리: 작업자의 오류를 포착합니다.

self.onerror = (error) => {
  console.error('Worker error:', error.message);
};

다른 유용한 기능으로는 외부 스크립트 로드를 위한 importScript, 작업자 종료를 위한 self.close, 시간 제한 작업을 위한 setTimeout/setInterval 등이 있습니다. 필요한 경우 자세한 내용은 설명서를 참조하세요.

웹 놀이터 프로젝트의 사용 사례 예

다음은 Web Worker가 샘플 템플릿 플레이그라운드 프로젝트를 크게 향상시킬 수 있는 세 가지 실제 시나리오입니다.

사례 1: 템플릿 데이터에 대한 API 호출

API에서 템플릿 데이터를 가져오면 사용하기 전에 구문 분석해야 하는 거대한 데이터세트가 생길 수 있습니다. 직접 수행하면 UI 스레드가 차단될 수 있습니다.

1. 작업자 파일 생성: dataParser.worker.js를 생성합니다.

// dataParser.worker.js
self.onmessage = (event) => {
  const { rawData } = event.data;
  const parsedData = rawData.map((template) => ({
    name: template.name,
    tag: template.tag,
  }));

  self.postMessage(parsedData);
};

2. React에서 작업자 사용:

import React, { useState } from 'react';

export default function templateDataParser({ rawData }) {
  const [parsedData, setParsedData] = useState([]);

  const parseData = () => {
    const worker = new Worker(new URL('./dataParser.worker.js', import.meta.url));
    worker.postMessage({ rawData });

    worker.onmessage = (event) => {
      setParsedData(event.data);
      worker.terminate();
    };
  };

  return (
    <div>
      <button onClick={parseData}>Template Parsed Data</button>
      <pre class="brush:php;toolbar:false">{JSON.stringify(parsedData, null, 2)}

); }

로그인 후 복사

사례 2: URL 압축 및 압축 풀기

사용자가 압축 URL을 통해 템플릿을 공유할 수 있도록 Web Worker는 압축 및 압축 해제를 효율적으로 처리할 수 있습니다.

1. 작업자 파일 생성: urlCompressor.worker.js를 생성합니다.

// urlCompressor.worker.js
import LZString from 'lz-string';

self.onmessage = (event) => {
  const { action, data } = event.data;
  let result;

  if (action === 'compress') {
    result = LZString.compressToEncodedURIComponent(data);
  } else if (action === 'decompress') {
    result = LZString.decompressFromEncodedURIComponent(data);
  }

  self.postMessage(result);
};

2. React에서 작업자 사용:

import React, { useState } from 'react';

export default function URLCompressor({ template }) {
  const [compressedURL, setCompressedURL] = useState('');

  const compressTemplate = () => {
    const worker = new Worker(new URL('./urlCompressor.worker.js', import.meta.url));
    worker.postMessage({ action: 'compress', data: template });

    worker.onmessage = (event) => {
      setCompressedURL(event.data);
      worker.terminate();
    };
  };

  return (
    <div>
      <button onClick={compressTemplate}>Compress Template</button>
      <pre class="brush:php;toolbar:false">{compressedURL}

); }

로그인 후 복사