Web Worker的了解

Web Worker

Web Worker让你可以在独立的线程运行一个JavaScript文件，使用异步事件在线程之间传递消息。它们非常适用于把长时间的或资源密集型的任务卸载到不同的线程中，以提高主UI线程的响应性。

Web Worker 介绍

JavaScript当前并没用任何支持多线程执行的功能，而像程序中每一个这样的独立的多线程部分被称为一个（Web）Worker， 这种类型的并行化被称为任务并行，因为其重点在于把程序划分为多个块来并发运行。

在js 主程序中，可以这样实例化一个Worker：

var w1 = new Worker(‘http://…’);
这个url 应该指向一个JavaScript文件的位置，这个文件将被加载到一个Worker中； 然后浏览器启动一个独立的线程，让这个文件在这个线程中作为独立的程序运行。

Worker 之间以及它们和主程序之间，不会共享任何作用域或资源，那会把所有多线程编程的噩梦都带到前端领域，而是通过一个基本的事件消息机制相互联系。 Worker w1 对象是一个事件侦听者和触发者，可以通过订阅它来获得这个Worker 发出的事件以及发送事件给这个Worker。

以下是如何侦听事件：

w1.addEventListener(“message”, function(e) {

});
也可以发送“message” 事件给这个Worker

w1.postMessage(“hello for you”);
在这个Worker 内部，收发消息是完全对称的：

// “helloworker.js”
addEventListener(“message”, function(e) {

});
postMessage(“hello for you reply”);
Worker 的环境：
在Worker内部是无法访问主程序的任何资源的，这意味着你不能访问它的任何全局变量，也不能访问页面的DOM或者其他资源； 这是一个完全独立的线程。

不过，你可以访问网络操作（ajax, WebSocket）以及定时器； Worker可以访问几个重要的全局变量和功能的本地复本，如：navigator，location，JSON 和 applicationCache。

Worker 的应用：

（1）、处理密集型数学计算；
（2）、高流量网络通信；
（3）、大数据集排序；
（4）、数据处理，如：压缩，音频分析、图像处理等

共享Worker

如果你的站点或app 允许加载同一个页面的多个tab，那你可能非常希望通过防止重复使用Worker 来降低系统的资源使用； 在这一方面最常见的就是socket网络连接，因为浏览器限制了同一个主机的同时连接数目。当然，限制来自于同一客户端的连接数也减轻了你的资源压力。

在这个时候，创建一个整个站点或app的所有页面实例都可以共享的中心Worker就非常有用了。 这被称为ShareddWorker，可以通过下面的方式创建（只有Chrome 和 Firefox支持这一个功能）

var w1 = new SharedWorker("http://...");

因为共享 Worker 可以与站点的多个程序实例或多个页面连接，所以这个 Worker 需要通过 某种方式来得知消息来自于哪个程序。这个唯一标识符称为端口（port），可以类比网络 socket 的端口。因此，调用程序必须使用 Worker 的 port 对象用于通信：

w1.port.addEventListener("message", handleMessages);
w1.port.postMessage("something...");

还有端口连接必须要初始化：

w1.port.start();

在共享 Worker 内部，必须要处理额外的一个事件：“connect”。这个事件为这个特定的连 接提供了端口对象。保持多个连接独立的最简单办法就是使用 port 上的闭包（参见本系列 《你不知道的 JavaScript（上卷）》的“作用域和闭包”部分），就像下面的代码一样，把这 个链接上的事件侦听和传递定义在 “connect” 事件的处理函数内部：

//在共享Worker内部
addEventListener("connect", function(e){
    // 这个连接分配的端口
    var port = e.ports[0];
    port.addEventListener("message", fucntion(e) {
        port.postMessage("...");     
    });
    //初始化端口连接
    port.start();
});