初识web Worker(一)

305 阅读1分钟

以前经常听说过web worker,但是见过没有过真正的使用场景。然后目前要做一个项目在讨论中发现可以用到web worker,刚好研究一下web worker是如何使用的。

1.简介

Web Worker为Javascript创造多线程环境,允许主线程创建Worker线程,将一些任务分配给Worker线程运行。等Worker线程完成任务之后可以将返回结果传送给主线程。
优点:一些计算密集型或高延迟的任务,被worker线程负担,主线程(UI交互)就会很流畅。

2.使用场景

我们目前用到的场景就算是计算密集型任务,是在录音的同时需要把录音转化为文字并展示出来。但是我们本地拿到的录音内容格式跟需要的格式是不一样的,所以需要进行转码,而且由于是实时录音,所以转码操作进行的非常频繁,为了避免对主线程造成卡顿的影响,这种情况下就可以采取创建Worker线程。

3.基本用法

  • 主线程
// 主线程采用new命令,调用worker构造函数,新建一个worker线程
var worker = new Worker('work.js');

// 主线程调用worker.postMessage()方法,向worker线程发送消息
worker.postMessage('Hello World');

// 传过数据之后,主线程通过worker.onmessage指定监听数据,接受worker线程传回来的消息
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
  doSomething();
}

// worker完成任务以后,主线程就可以把它关掉
worker.terminate()

后续用法感兴趣的童鞋可以跳转初识web Worker(二)阅读~