웹 워커 설치

웹 워커란?

웹 워커란 웹 응용 프로그램의 스크립트 처리를 주요 내용과 다른 라인으로 옮겨 백엔드에서 실행할 수 있는 구조를 말한다.시간이 걸리는 프로세스를 다른 스레드로 옮길 수 있으므로 UI를 담당하는 마스터 스레드를 중단, 지연 없이 처리할 수 있다는 장점이 있습니다.
by MDN
JS는 단식 레드이기 때문에 진정한 의미의 병행 처리를 할 수 없다.
따라서 매우 무거운 처리를 쓰면 다른 버튼 따위는 작동하지 않고 사이트는 완전히 응고된다.
이 문제를 해결할 수 있는 것은 Web Worker이다.
최근 SPA 등으로 인해 고객 측에서 무겁게 다루는 경우가 늘었기 때문에 반드시 능숙하게 사용해야 한다고 생각합니다.

현재 브라우저의 대응은 어떻습니까?

by Can I use
Opera 말고는 거의 다 가능해요.

어쨌든 코드

index.js

const worker = new Worker('worker.js');

worker.addEventListener('message', (e) => {
  console.log('Workerから受け取ったデータは: ', e.data);
}, false);

worker.postMessage('Hello, world');

worker.js

self.addEventListener('message',(e) => {
  self.postMessage(e.data);
}, false);

그나저나 워커의 스크립트 속 글로벌화는 일꾼 자신이기 때문에 아래와 같이 쓸 수 있다.
worker.js

addEventListener('message',(e) => {
  postMessage(e.data);
}, false);

결실

Hello, world

그림으로 보면 이해하기 쉽다.

각자의 jsonmesssage에서 수신 시/발송 시 이벤트를 기술할 수 있습니다.
수신 데이터/발송 데이터는 메시지 이벤트의 데이터 속성에서 얻을 수 있습니다.
생각보다 간단하다.

워크맨을 끝내고 싶을 때

worker.terminate();

terminate 사용 가능한 방법으로 즉시 종료.

오류 처리

Worker에서 실행할 때 오류가 발생하면 oneror 이벤트 처리 프로그램을 호출합니다.ErrorEvent 인터페이스를 구현하는 error 이벤트가 적용됩니다.
듣건대(by MDN )
얼른 해봐.
index.js

const worker = new Worker('worker.js');

worker.addEventListener('error', function (e) {
  console.log(e)
}, false);
worker.postMessage('Hello World');

worker.js

self.addEventListener('message', (e) => {

  throw new Error('何かしらのエラー')
  self.postMessage(e.data)
}, false)

결과:

확실히 포착했다ErrorEvent.
여러 속성이 있지만 다음 세 가지는 중요 항목이다.message...인간정보filename...오류 발생 소스의 파일 이름lineno...잘못된 행 번호

스크립트/라이브러리 import

Worker 스레드 측면에서 가져올 때 사용하시겠습니까? importScripts()매개 변수로 지정된 스크립트를 실행합니다.

importScripts('test.js')
importScripts('foo.js', 'bar.js')

다른 파일이 아닌 포함된 Worker

파일에 대한 기술을 문자열화하여 Blob을 생성한 다음 그 URL을 통해 OK를 만듭니다.
실제 실시에서는 별로 사용하지 않는 것 같아서 일단 예는 언급하지 않겠습니다.

주의점

Worker는 DOM을 직접 조작할 수 없고, window 방법과 속성을 사용할 수 없습니다.(worker 자체는 전 세계)
반대로 그 외에는 거의 다 사용할 수 있다.
MDN에서 사용할 수 있는 클래스 함수를 요약했습니다.
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
또한 워커와 교환할 때의 데이터는 공유된 것이 아니라 각자 복제된 것이다.
따라서 워커 쪽에서 당신에게 건네준 데이터를 조작하더라도 복사자와 관련이 있을 수 없습니다.
다음에는 Service Worker를 배울 예정입니다.

참고 자료

https://www.html5rocks.com/ja/tutorials/workers/basics/
https://www.codit.work/notes/ytq5ztvnhceco3jn2bkb/