Web Worker 를 사용한 비동기 함수 실행

소개

이 랩에서는 Web Worker 를 사용하여 장시간 실행되는 함수를 비동기적으로 실행하는 방법을 배웁니다. 이 랩의 목적은 개발자가 함수를 별도의 스레드에서 실행하여 함수가 실행되는 동안 UI 가 차단되는 것을 방지하는 방법을 가르치는 것입니다. 이 랩은 Web Worker 를 생성하고 이를 사용하여 함수를 실행하는 실용적인 예제를 제공합니다.

Web Worker 를 사용한 비동기 함수 실행

UI 를 차단하지 않고 함수를 실행하려면 Web Worker 를 사용하여 별도의 스레드에서 함수를 실행하십시오. 방법은 다음과 같습니다.

실행할 함수의 문자열화된 버전을 내용으로 하는 Blob 객체 URL 을 사용하여 Worker를 생성합니다.
함수 호출의 반환 값을 즉시 게시합니다.
onmessage 및 onerror 이벤트를 수신하고, worker 에서 다시 게시된 데이터를 resolve 하거나 오류를 throw 하는 Promise를 반환합니다.

const runAsync = (fn) => {
  const worker = new Worker(
    URL.createObjectURL(new Blob([`postMessage((${fn})());`]), {
      type: "application/javascript; charset=utf-8"
    })
  );
  return new Promise((resolve, reject) => {
    worker.onmessage = ({ data }) => {
      resolve(data);
      worker.terminate();
    };
    worker.onerror = (error) => {
      reject(error);
      worker.terminate();
    };
  });
};

runAsync에 제공된 함수는 모든 것이 문자열화되어 리터럴이 되므로 클로저 (closure) 를 사용해서는 안 됩니다. 따라서 모든 변수와 함수는 내부에서 정의되어야 합니다. 다음은 몇 가지 예입니다.

const longRunningFunction = () => {
  let result = 0;
  for (let i = 0; i < 1000; i++)
    for (let j = 0; j < 700; j++)
      for (let k = 0; k < 300; k++) result = result + i + j + k;

  return result;
};

runAsync(longRunningFunction).then(console.log); // 209685000000
runAsync(() => 10 ** 3).then(console.log); // 1000
let outsideVariable = 50;
runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'

함수 비동기 실행

소개

Web Worker 를 사용한 비동기 함수 실행

요약