VueJS - 전용 웹 작업자 구현

JavaScript는 동기식 단일 스레드 언어이므로 다중 코어 CPU를 최대한 활용할 수 없습니다.

그럼에도 불구하고 특정 비동기 작업을 수행하고 메인 스레드와 때로는 인터페이스를 차단하지 않고 응답을 기다릴 수 있는 몇 가지 메커니즘을 제공합니다.

This article에서는 이러한 각 메커니즘을 설명합니다.

JavaScript에서 비동기 작업을 수행하는 몇 가지 방법이 있지만 때로는 충분하지 않습니다. 예를 들어 특정 순서에 따라 작업을 수행해야 하는 큰for 루프를 생각해 보십시오.

비동기식으로 수행하거나 CPU의 여러 코어를 활용하는 방법은 없습니다. 글쎄요, 적어도 없었습니다.

HTML 5 및 최신 웹 API를 사용하면 이제 메인 스레드 및 결과적으로 인터페이스를 차단하지 않고 무거운 처리가 필요한 코드를 실행할 수 있습니다.
오늘은 그 중 하나인 웹 작업자에 대해 이야기하겠습니다.

official specification에는 세 가지 유형의 근로자가 언급되어 있습니다.

Dedicated Workers

Shared Workers

Service Workers

Dedicated Worker는 기본 프로세스에 의해 인스턴스화되며 해당 프로세스와만 통신할 수 있습니다.

공유 작업자는 동일한 출처(다른 브라우저 탭, iframe 또는 기타 공유 작업자)에서 실행되는 모든 프로세스에서 액세스할 수 있습니다.

서비스 워커는 오리진과 경로에 등록된 이벤트 지향 워커입니다. 이들은 관련된 웹 사이트/페이지를 제어하고, 탐색 및 리소스 요청을 가로채 수정하고, 매우 세분화된 방식으로 리소스를 캐시할 수 있습니다.

출처: https://thecodersblog.com/web-worker-and-implementation



이 포스트에서는 VueJS에서 Dedicated Worker를 구현하고 이를 사용하여 멀티 코어 CPU를 활용하는 방법에 대해 이야기하려고 합니다.

VueJS 프로젝트 내에서 웹 작업자를 구현하는 몇 가지 방법이 있습니다.

vue-worker과 같은 플러그인 사용

구현하기 custom webpack configuration

간단한 JS 파일을 참조하는 작업자 인스턴스화(이 파일에 대해 이야기해 봅시다 😆)

VueJS 프로젝트에서 전용 웹 작업자를 구현하는 것은 매우 쉽습니다.

VueJS에서 전용 웹 작업자 구현

.js 폴더에 public 파일을 만듭니다.

onmessage를 매개변수로 받는 event 함수를 구현하여 데이터*를 처리하고 실행 종료 시 postMessage를 호출하여 결과를 매개변수로 전달합니다.

*이 작업자에게 매개변수로 전달된 데이터는 event.data 속성에서 검색할 수 있습니다.

Vue 구성 요소에서 새 Worker를 인스턴스화하고 최근 생성된 파일.js의 절대 경로를 생성자의 매개 변수로 전달합니다.

onmessage 및 onerror 함수를 구현합니다.
Worker로부터 메시지를 받았을 때와 에러가 났을 때 실행되는 콜백입니다.

해결해야 할 문제를 고려하여 데이터에서 청크를 만들고(lodash/fp/chunk 함수를 사용할 수 있음) 청크를 매개 변수로 전달하는 호출worker.postMessage을 반복합니다.

두 파일의 구조는 다음과 유사합니다.

// ./public/worker.js file

onmessage = function(event) {
  var data = event.data // data sent by the Vue component
is retrieved from 'data' attribute

  var result = doSomething()

  postMessage(result)
}

// Worker.vue
import { chunk, map } from 'lodash/fp'

export default {
  props: ['data'],
  computed: {
    chunkedData() {
       const size = Math.ceil(this.data.length / 4) // In this case, 4 threads will be created
       return chunk(size, this.data)
    }
  },
  run() {
    const worker = new Worker('/worker.js')

    worker.onmessage = function(event) {
      const data = event.data // Data passed as parameter by the worker is retrieved from 'data' attribute
      console.log(data)
    }

  worker.onerror = console.error // This will be executed in case of any errors

   map(chunk => worker.postMessage(chunk), this.chunkedData)
  }
}

이 구조를 사용하면 웹 작업자를 인스턴스화하고 데이터를 청크로 분할하고 각 청크를 비동기식으로 처리하여 여러 스레드를 활용하고 인터페이스 및 브라우저 정지를 방지할 수 있습니다.

**참고: worker.js 파일 내에서 ES5 코드를 사용하는 것이 좋습니다. 이 기사가 작성되는 시점에는 Web Workers 내의 ES6+ 코드가 여전히 모든 브라우저에서 사용됩니다not fully supported.*

this repo에서 이 구현의 전체 예를 찾을 수 있습니다.

당신이 그것을 좋아 바랍니다! 공유하고 의견을 말하십시오.

@helloimnik의 표지 이미지