如何优雅的使用Web Worker

Web Worker是HTML5中提出的概念，用来处理独立于主线程处理高费时的任务，从而不会阻塞主线程。目前绝大部分浏览器都支持Web Worker功能，不过使用时要注意它不能操纵DOM元素、同源政策等问题。

Web Worker的使用一般是指定一个脚本的URI来执行worker线程，通过postMessage方法和onmessage事件处理函数来进行数据传递。同时，如果Worker线程与主线程频繁的通信，仍然可能影响页面的性能。对于复杂的计算处理来说，只执行一次的话，也没有必要使得Worker线程一直存在。所以，我才打算开发一个能够通过传递进入的复杂执行函数来自动创建一个Worker线程，同时当运算完成后，返回结果值，最后关闭Worker线程。这样在很多业务场景中都可以方便的使用，用法也很简洁易懂。

我们最终需要的效果就是传入一个函数，然后自动生成一个Worker线程来处理它，具体的使用方式如下：

useWorker(event).then(res => {
  // do something
});

接下来看下如何实现这样一个工具库。

首先，需要通过传入的函数来生成一个js脚本，我们Blob对象来创建一个js脚本：

const create = f => {
  if (typeof f === 'function') {
    const code = [
      `self.fn = ${f.toString()};`,
      'self.onmessage = (e) => {',
      ' const r = self.fn(e.data);',
      ' self.postMessage(r);',
      '}'
    ];
  }

  const blob = new Blob(code, { type: 'text/javascript' });
}

再使用URL.createObjectURL()来创建URL的Blob对象，返回一个包含了对象URL的DOMString，它可以直接在Web Worker中使用。

const url = URL.createObjectURL(blob);
const worker = new Worker(url);

另外，我们需要在worker新增cleanup属性，用来释放URL对象和关闭Worker线程。

worker.cleanup = () => {
  URL.revokeObjectURL(url);
  worker.terminate();
};

这样，自动创建Worker线程的函数就开发好了，接下来开发一个useWorker方法来调用。这里我们使用Promise来对Worker的交互与错误进行处理。

const useWorker = (f, i) => {
  const worker = create(f);

  if (!worker) {
    throw new Error('Need correctly parameter!');
  }

  worker.postMessage(i);

  return new Promise((resolve, reject) => {
    worker.onmessage = e => {
      if (worker.cleanup) worker.cleanup();
      resolve(e.data);
    };

    worker.onerror = e => {
      if (worker.cleanup) worker.cleanup();
      reject(e.message);
    };

    worker.onmessageerror = () => {
      if (worker.cleanup) worker.cleanup();
      reject(e.message);
    };
  });
};

最后，我们来测试下：

不使用Web Worker

const runTime = Date.now();
console.log(runTime);

for (let i = 0; i < 10000000; i++) {
// do something
}

console.log(Date.now() - runTime); // 10 milliseconds or more

使用Web Worker

const runTime = Date.now();
console.log(runTime);

useWorker(() => {
  for (let i = 0; i < 10000000; i++) {
    // do something
  }
  return 'finish';
}).then(res => {
  console.log(res);
});

// time
console.log(Date.now() - runTime); // within 5 milliseconds

可以看到，确实优化了性能。

如何优雅的使用Web Worker

推荐阅读更多精彩内容