시작하기 위해 웹 작업자에 대해 알아야 할 모든 것.

최근에 저는 웹 워커에 대해 고민하고 있는데, 이것은 웹 워커 사용을 시작하기 위해 알아야 할 모든 것에 대한 포괄적인 가이드입니다.

블로그 읽기를 건너뛰고 대신 코드를 체크아웃하려면 모든 스니펫이 포함된 github 저장소를 참조하세요.

Github 웹 작업자 저장소

 

목차

• 일반적인 오해
• 웹 작업자 기본 설정
  • 네이티브 JavaScript를 사용한 Web Worker 설정
  • Comlink를 통한 Web Workers 설정
• 내 직원이 제대로 등록되었는지 어떻게 확인하나요?
• 추가 자료

 
 

일반적인 오해

그래서 제가 Web Worker를 탐색하게 된 이유는 플랫폼에서 계산량이 많은 작업을 구축하고 있는데 UI가 차단된다는 점이었습니다.
그래서 '어, 알았어, UI를 가리지 않게 하려면 어떻게 해야 하지?'라고 생각했어요. setTimeout을 사용하여 메인 스레드의 모든 코드가 실행을 완료했는지 확인한 후 계산량이 많은 작업을 실행할 수 있나요?

여기에는 오해가 있습니다. setTimeout을 사용한다고 해서 UI가 차단되지 않는다는 의미는 아닙니다. 예, 메인 스레드의 모든 것은 setTimeout 콜백이 실행되기 전에 실행됩니다. 그러나 이 콜백은 매크로 작업 큐에서 팝업될 때 메인 스레드 자체에서 실행되므로 UI가 응답하지 않게 됩니다.

setTimeout의 작동 방식에 대한 자세한 내용은 여기를 참고하세요 —

• 비동기 JavaScript 및 처음부터 이벤트 루프 - Akshay Saini
• 이벤트 루프, 웹 API, 작업 대기열 - Lydia Hallie

 
 

웹 작업자 기본 설정

JavaScript는 본질적으로 '단일 스레드 언어'이지만 웹 워커를 사용하면 계산량이 많은 코드를 별도의 스레드에서 실행할 수 있습니다.

시작하기 전에 몇 가지 참고할 사항이 있습니다.

• 웹 작업자는 DOM과 상호 작용할 수 없습니다
• 웹 작업자 범위는 창이 아닌 자체입니다.
• 워커는 상대적으로 무게가 무거워서 대량으로 사용하기에는 적합하지 않습니다. 예를 들어, 4메가픽셀 이미지의 각 픽셀에 대해 하나의 작업자를 시작하는 것은 부적절합니다. [참고 - HTML 사양]
• 또한 웹 작업자는 어떤 작업을 4초가 아닌 2초로 만드는 것이 아니라 DOM이 0초 동안 정지된 상태에서 작업을 수행하는 것입니다. [참고 - 웹 작업자는 느리지만 괜찮습니다 - Calvin Metcalf]
• 작업자가 상위 페이지와 동일한 원본 내에서 호스팅되는 한 작업자는 새로운 작업자를 생성할 수 있습니다. [참고 - MDN]

 

기본 JavaScript를 사용하는 웹 작업자

1. 작업자 스레드에서 실행하려는 코드가 포함된 새 JavaScript 파일을 만듭니다. (worker.js라고 말해보세요)
2. 기본 스크립트에서 작업자를 인스턴스화합니다.

const worker = new Worker("./worker.js")

참고: Worker.js는 모듈이 아니므로 import 문을 사용할 수 없습니다. 아직. :')

worker.js를 모듈로 사용하려면 생성자의 옵션에 type: module을 지정하세요.

const worker = new Worker("./worker.js")

1. 데이터는 메시지 시스템을 통해 작업자 간에 전송됩니다. 양측은 postMessage() 메소드를 사용하여 메시지를 보내고 onmessage 이벤트 핸들러를 통해 메시지에 응답합니다.
2. postMessage()에서 순환 참조가 있는 복잡한 객체를 전달하려면 구조화된Clone 메서드를 사용하세요.
3. 웹 워커를 종료하려면 Worker API의 종료 메소드를 사용하세요. 이는 근로자에게 진행 중인 작업을 완료할 기회를 제공하지 않습니다. 한번에 정지됩니다.

const worker = new Worker('./worker.js', { type: 'module' })

 
모두 합치기

이제 웹 작업자를 통합한 후 코드가 어떻게 보이는지 살펴보겠습니다.

메인 스레드 코드:

worker.terminate() 

작업자 스레드 코드:

// ...
function workerFunction() {
  // Don't spin up a new worker instance if the process has already been started.
  if (statusElement.textContent !== PROCESS_STATUS.PROCESSING && window.Worker) {
    const worker = new Worker('./worker.js', {
      type: 'module'
    })

    // Sending 10000000000000 to the web worker
    worker.postMessage(10000000000000)

    statusElement.textContent = PROCESS_STATUS.PROCESSING

    // This piece of code is executed after worker finishes its task and returns data. 
    worker.onmessage = function (event) {
      statusElement.textContent = event.data
    }
  }
}
// ...

결과는 다음과 같습니다.

애플리케이션을 실행하면 UI를 차단하지 않고 계산량이 많은 작업이 실행되는 것을 확인할 수 있습니다.

 

Comlink를 사용한 웹 작업자 설정

Comlink는 작은 라이브러리(1.1kB)로 postMessage 로직에 대한 사고의 정신적 장벽을 제거합니다.

더 추상적인 수준에서는 postMessage 및 ES6 프록시에 대한 RPC 구현입니다.

Comlink를 사용한 구체적인 이유는 일반 JavaScript를 사용하여 메인 스레드에서 워커로 함수를 전달할 수 없었기 때문입니다. Comlink의 프록시를 사용하여 메인 스레드에서 워커로 콜백 함수를 쉽게 전달할 수 있었습니다. [이 부분을 참고하세요]

프로젝트에서 comlink 사용을 시작하려면 라이브러리를 설치하세요

const worker = new Worker("./worker.js")

이 라이브러리를 시작하려면 다음 방법에 대해 알아야 합니다.

Comlink.wrap(엔드포인트)

• 작업자의 노출된 개체를 래핑하여 마치 로컬 개체인 것처럼 상호 작용할 수 있는 프록시를 반환합니다.
• 프록시는 노출된 값의 모든 속성과 기능을 가지지만 액세스와 호출은 본질적으로 비동기적입니다. 즉, 함수가 숫자를 반환하면 이제 숫자에 대한 약속을 반환합니다.

const worker = new Worker('./worker.js', { type: 'module' })

Comlink.expose(값, 엔드포인트?, allowedOrigins?)

• exposure 함수는 한 스레드에서 다른 스레드로 값을 노출합니다(즉, 작업자의 객체를 메인 스레드로 노출).

worker.terminate() 

 

내 직원이 제대로 등록되었는지 어떻게 확인하나요?

• 작업자 파일이 웹브라우저에 등록되었는지 확인하려면 (저는 크롬을 사용하고 있습니다)
• 마우스 오른쪽 버튼을 클릭하고 → Inspect를 클릭한 후 작업자 파일을 찾을 수 있는 소스 패널로 이동하세요.
• 종료되면 작업자 파일이 소스 패널에 표시되지 않아야 합니다
• 직원을 해고한 후에도 여전히 작업자 파일을 볼 수 있는 경우, 여러 명의 작업자를 등록했지만 모두 해고되지 않았을 가능성이 있습니다.

 

추가 자료

• 전송 처리기 및 이벤트 리스너
• 공유노동자
• 양도 가능한 객체

위 내용은 시작하기 위해 웹 작업자에 대해 알아야 할 모든 것.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!