初识Web Worker

原文发布在我的个人博客 初识Web Worker | 以太空间

一、概述

  众所周知，不同于Java/C#这些编程语言，JavaScript作为一门为浏览器而生的语言，采用的是单线程模型，也就是说，所有任务排成一个队列，一次只能做一件事。随着电脑计算能力的增强，尤其是多核CPU的出现，这一点带来很大的不便，无法充分发挥JavaScript的潜力。不过2009年Node.js出现后，JavaScript也可以依靠Node.js的cluster模块以多线程的方式运行，但是这种方式必须要在Node环境中才行，那么在浏览器中如何以多线程的方式运行JavaScript呢？

  Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中，换句话说，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。因此，每一个子线程就好像一个“工人”（worker），默默地完成自己的工作。这样做的好处是，一些高计算量或高延迟的工作，被worker线程负担了，所以父进程（通常是UI进程）就会很流畅，不会被阻塞或拖慢。

  Web Worker有以下几种工作线程：

• 专用线程（Dedicated Worker）：只能为一个页面所使用，只能与创造它们的父进程通信。

• 共享线程（Shared Worker）：可以被多个页面（必须同域）获取并使用。

• Service Worker：一个在网络应用与浏览器或网络层之间的代理层，它可以拦截网络请求，使得离线访问成为可能。

  Web Worker有以下几个特点：

• 同域限制：子线程加载的脚本文件，必须与主线程的脚本文件在同一个域。

• DOM限制：子线程所在的全局对象，与父进程不一样，它无法读取网页的DOM对象，即document、window、parent这些对象，子线程都无法得到。（但是，navigator对象和location对象可以获得。）

• 脚本限制：子线程无法读取网页的全局变量和函数，也不能执行alert和confirm方法，不过可以执行setInterval和setTimeout，以及使用XMLHttpRequest对象发出AJAX请求。

• 文件限制：子线程无法读取本地文件，即子线程无法打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

二、基础API

1. 新建和启动子线程

  首先在父进程（假设父进程文件是main.js）中调用构造函数（Worker），传入子进程脚本的文件名。

// File: main.js
const worker = new Worker('worker.js');

  这个子进程脚本必须来自网络端，如果下载失败的话，子进程也启动不了了。

  子线程新建之后，并没有启动，必需等待主线程调用postMessage方法，即发出信号之后才会启动。postMessage方法的参数，就是主线程传给子线程的信号。它可以是一个字符串，也可以是一个对象。

// File: main.js
worker.postMessage("Hello World");
worker.postMessage({
    method: 'echo',
    args: ['Work']
});

注意：只要符合父线程的同源政策，Worker线程自己也能新建Worker线程。Worker线程可以使用XMLHttpRequest进行网络I/O，但是XMLHttpRequest对象的responseXML和channel属性总是返回null。

2. 父子进程的事件监听

  首先在父进程中对子进程进行消息监听

// File: main.js
worker.onmessage = function(e) {
    let { data } = e;
    console.log(data);
};

// 或者

worker.addEventListenr(function (e) {
    console.log(e.data);
});
  ```
然后在子进程中对父进程进行消息监听
```js
// File: worker.js
self.onmessage = function(event) {
    let method = event.data.method;
    let args = event.data.args;
    console.log(method, args);
};

// 或者

self.addEventListener('message', function(e) {
    console.log(e.data);
});




<div class="se-preview-section-delimiter">div>

3. 父子进程的数据通信

  父进程向子进程发送消息

// File: main.js
worker.postMessage('Hello, My honey bady');




<div class="se-preview-section-delimiter">div>

  子进程向父进程发送消息

// File: worker.js
self.postMessage('Hello, My daddy');




<div class="se-preview-section-delimiter">div>

4. 错误处理

  父线程可以监听子线程是否发生错误。如果发生错误，会触发主线程的error事件。

// File: main.js
worker.onerror(function(event) {
  console.log(event);
});

// 或者

worker.addEventListener('error', function(event) {
  console.log(event);
});




<div class="se-preview-section-delimiter">div>

5. 关闭子线程

  使用完毕之后，为了节省系统资源，我们必须在主线程调用terminate方法，手动关闭子线程。

// File: main.js
worker.terminate();




<div class="se-preview-section-delimiter">div>

  也可以子线程内部关闭自身。

// File: worker.js
self.close();

三、图解worker模型

  webKit加载并执行worker线程的流程如下图所示

以下内容来自AlloyTeam团队

1. worker线程的创建的是异步的

  代码执行到let worker = new Worker(task.js')时，在内核中构造WebCore::JSWorker对象（JSBbindings层）以及对应的WebCore::Worker对象（WebCore模块)，根据初始化的url地址task.js发起异步加载的流程；主线程代码不会阻塞在这里等待worker线程去加载、执行指定的脚本文件，而是会立即向下继续执行后面代码。

2. postMessage消息交互由内核调度

  main.js中，在创建woker线程后，立即调用了postMessage方法传递了数据，在worker线程还没创建完成时，main.js中发出的消息，会先存储在一个临时消息队列中，当异步创建worker线程完成，临时消息队列中的消息数据复制到woker对应的WorkerRunLoop的消息队列中，worker线程开始处理消息。在经过一轮消息来回后，继续通信时， 这个时候因为worker线程已经创建，所以消息会直接添加到WorkerRunLoop的消息队列中。

四、worker线程数据通讯方式

  主线程与子线程数据通信方式有多种，通信内容，可以是文本，也可以是对象。需要注意的是，这种通信是拷贝关系，即是传值而不是地址，子线程对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给子线程，后者再将它还原。

参考链接
[1] AlloyTeam 深入理解Web Worker
[2] 阮一峰 Web Worker