如何优雅的使用Web Worker

如何优雅的使用Web Worker

技术杂谈小彩虹2021-07-17 6:55:02170A+A-

欢迎star:complex-calculations-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

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

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们