初识Web Workers

2017年11月25日Web前端0

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支持多线程。

HTML5JavaScript

目录