2015-06-06

HTML5 JS Thread -- Webworker

Web Worker是HTML5中新增的一项技术，用于Web程序实现后台处理。

一、WebWorker的概述及特性

JavaScript语言采用的是单线程模型，也就是说，所有任务排成一个队列，一次只能做一件事。随着电脑计算能力的增强，这一点带来很大的不便，无法充分发挥JavaScript的潜力。尤其考虑到，File API允许JavaScript读取本地文件，就更是如此了。

Web Worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。因此，每一个子线程就好像一个“工人”（worker），默默地完成自己的工作。

首先，我们了解一下WebWorker的特性：

同域限制。子线程加载的脚本文件，必须与主线程的脚本文件在同一个域。
DOM限制。子线程无法读取网页的DOM对象，即document、window、parent这些对象，子线程都无法得到。（但是，navigator对象和location对象可以获得。）
脚本限制。子线程无法读取网页的全局变量和函数，也不能执行alert和confirm方法，不过可以执行setInterval和setTimeout，以及使用XMLHttpRequest对象发出AJAX请求。
文件限制。子线程无法读取本地文件，即子线程无法打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

使用之前，检查浏览器是否支持这个API。支持的浏览器包括IE10、Firefox (从3.6版本开始)、Safari (从4.0版本开始)、Chrome 和 Opera 11，但是手机浏览器还不支持。

if (window.Worker) {
  // 支持
} else {
  // 不支持
}

二、如何使用WebWorker

1.线程的创建

在主线程内部，采用new命令调用Worker方法，可以新建一个子线程
var worker = new Worker('work.js');

Worker方法的参数是一个脚本文件，这个文件就是子线程所要完成的任务，上面代码中是work.js。由于子线程不能读取本地文件系统，所以这个脚本文件必须来自网络端。如果下载没有成功，比如出现404错误，这个子线程就会默默地失败。

子线程新建之后，并没有启动，必需等待主线程调用postMessage方法，即发出信号之后才会启动。
worker.postMessage("Hello World");

postMessage方法的参数，就是主线程传给子线程的信号。它可以是一个字符串，也可以是一个对象。

worker.postMessage({method: 'echo', args: ['Work']});

2.线程的监听

主线程必须指定message事件的回调函数，监听子线程发来的信号。

/* File: main.js */

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

在子线程内，也必须有一个回调函数，监听message事件。

/* File: work.js */

self.addEventListener('message', function(e) { 
   self.postMessage('You said: ' + e.data);
}, false);

self代表子线程自身，self.addEventListener表示对子线程的message事件指定回调函数（直接指定onmessage属性的值也可）。回调函数的参数是一个事件对象，它的data属性包含主线程发来的信号。self.postMessage则表示，子线程向主线程发送一个信号。

根据主线程发来的不同的信号值，子线程可以调用不同的方法。

/* File: work.js */

self.onmessage = function(event) {
  var method = event.data.method;
  var args = event.data.args;

  var reply = doSomething(args);
  self.postMessage({method: method, reply: reply});
};

3.线程之间的通信

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

主线程与子线程之间也可以交换二进制数据，比如File、Blob、ArrayBuffer等对象，也可以在线程之间发送。

但是，用拷贝方式发送二进制数据，会造成性能问题。比如，主线程向子线程发送一个500MB文件，默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。

如果要使用该方法，postMessage方法的最后一个参数必须是一个数组，用来指定前面发送的哪些值可以被转移给子线程。

worker.postMessage(arrayBuffer, [arrayBuffer]);
window.postMessage(arrayBuffer, targetOrigin, [arrayBuffer]);

三、两种WebWorker

Web workers可分为两种类型：专用线程dedicated web worker，以及共享线程shared web worker。 Dedicated web worker随当前页面的关闭而结束；这意味着Dedicated web worker只能被创建它的页面访问。与之相对应的Shared web worker可以被多个页面访问。在Javascript代码中，“Work”类型代表Dedicated web worker，而“SharedWorker”类型代表Shared web worker。
在绝大多数情况下，使用Dedicated web worker就足够了，因为一般来说在web worker中运行的代码是专为当前页面服务的。而在一些特定情况下，web worker可能运行的是更为普遍性的代码，可以为多个页面服务。在这种情况下，我们会创建一个共享线程的Shared web worker，它可以被与之相关联的多个页面访问，只有当所有关联的的页面都关闭的时候，该Shared web worker才会结束。相对Dedicated web worker，shared web worker稍微复杂些。

四、WebWorker使用XMLHttpRequest与服务端通信

有些情况下，web worker还需要与服务器进行交互。比如页面可能需要处理来自数据库中的信息，我们就需要使用Ajax技术与服务器交互，下面代码包含了web worker如何从服务端获取数据：

addEventListener("message", function(evt){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "xxxxxxx");
  xhr.onload = function(){
    postMessage(xhr.responseText);
  };
  xhr.send();
},false);

五、通过Error捕捉错误信息

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

worker.onerror(function(event) {
  console.log(event);
});

worker.addEventListener('error', function(event) {
  console.log("Line #" + event.lineno + " - " + event.message + " in " + event.filename);
});

Worker对象可以绑定error事件；而且evt对象中包含错误所在的代码文件（evt.filename）、错误所在的代码行数（evt.lineno）、以及错误信息（evt.message）。

六、通过terminate()方法终止Web Worker

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

也可以子线程内部关闭自身。
self.close();

被终止的Worker对象不能被重启或重用，我们只能新建另一个Worker实例来执行新的任务。