初识Web Workers

2017年11月25日Web前端

HTML5标准中的Web Workers给我们带来了JS多线程的实践。

一、什么是Web Workers

Web Worker让JS可以创建子线程来处理逻辑与计算,并保证页面对于用户的响应。因此,我们可以使用Web Workers处理一些比较耗CPU的计算。 比如:

index.html中:

<body>
    <div id="box">0</div>
</body>
var oBox = document.getElementById('box'),
    worker = new Worker('./worker.js');

worker.onmessage = function(e) {
    oBox.innerText = e.data;
}

work.js:

var num = 0;

setInterval(function() {
 num++;
 postMessage(num);
}, 1000);

这样,我们实现了一个每秒递增的类计时器。整个计算过程是在新建的线程中实现的,在每次计算后,将结果抛给主线程。也就是index中的js线程。

注:本地运行不行的话,需要启个服务器。

二、专用worker

前面的例子是专用worker的例子。专用worker,即是一个仅仅能被生成他的脚本所使用的worker,与他相对的是一个可以被多个脚本使用的共享worker,这个将在后面介绍。

1.生成专用worker

前面的例子也用到了,只要调用Worker()的构造函数就行了,

var worker = new Worker('./worker.js');

2.消息的接受和发送

主线程中:

worker.postMessage({value: 0});

此时会向worker线程发送一个键是value,值是0的对象。而在线程中可以写一个事件处理函数来处理这个事件: 专用线程中:

var num = -1;
onmessage = function(e) {
    num = e.data.value;
    start(); // 调用某个函数
}
function start() {
    setInterval(function() {
        num++;
        postMessage(num);
    }, 1000);
}

start函数中,设置了一个定时器,每次对num加一,并且通过postMessage返回给主线程。在worker中,worker是有效的全局作用域,所以处理事件可以直接书写。 而主线程中可以通过onmessage事件获取worker中返回的数据。

worker.onmessage = function(e) {
    oBox.innerText = e.data;
}

这样,我们就可以看到一个每秒递增一的页面。 注:作为参数传递给worker构造函数的URI必须遵循同源策略 。

3.终止线程

在主线程中,我们可以调用worker的terminate()方法:

worker.terminate();

而在worker中,我们可以直接调用自己的close()方法:

close();

4.处理错误

当线程中出现error时,我们可以通过onerror函数获取错误信息。

worker.onerror = function(e){
    // 中断子线程
    worker.terminate();
}

该事件不冒泡且可以被取消(preventDefault()方法阻止默认事件)。 错误时间event有三个比较重要的字段,

  • message: 错误消息内容。
  • filename: 发生错误的脚本文件名。
  • lineno: 发生错误时所在脚本文件的行号。

5.生成subworker

worker 能够生成更多的 worker,这就是所谓的subworker,它们必须托管在同源的父页面内。并且,subworker 解析 URI 时会相对于父 worker 的地址而不是自身页面的地址。这使得 worker 更容易记录它们之间的依赖关系。

importScripts();                        /\* 什么都不引入 */
importScripts('a.js');                /\* 只引入 "foo.js" */
importScripts('a.js', 'b.js');      /\* 引入两个脚本 */

注:脚本的下载顺序不固定,但执行时会按照传入 importScripts() 中的文件名顺序进行。这个过程是同步完成的;直到所有脚本都下载并运行完毕, importScripts() 才会返回。

三、共享worker

一个共享worker可以被不同的window、iframe或者worker访问,当然,所有这些浏览上下文必须属于同源(相同的协议,主机和端口号)。

具体详细内容见后期。

四、执行上下文

worker有他自己的上下文环境,所以在worker中有些方法是不能使用的。

  1. worker最顶层的不是window对象,所以所有window下的属性方法如alert、DOM API等这些都是不能使用的,但是setTimeout和setInterval是可以使用的。
  2. location和navigator的部分属性。
  3. worker中是可以访问XMLHttpRequest()对象的,所以Ajax请求是允许的。
  4. 主线程和worker之间传递消息时,只是复制或转移了值,而不是共享。

五、兼容性

新技术在使用时,兼容性总是要考虑的。 caniuse搜索有问题,暂时无图啊。。

注:web worker是浏览器的功能,并不是JS支持多线程。