解析Web Workers理念

详解Web Workres理念

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和通道属性总是为空)。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序 (反之亦然)

在worker线程中你可以运行任何你喜欢的代码，不过有一些例外情况。不能直接操作DOM

数据传递通过消息机制进行——双方都使用postMessage()方法发送各自的消息，使用onmessage事件处理函数来响应消息（消息被包含在Message事件的data属性中）。这个过程中数据并不是被共享而是被复制。

需运行在同源的页面，可以使用XMLHttpRequest 进行网络I/O, 所以本地也需要开启一个服务器。这里推荐npm anywhere

在主线程中使用时，onmessage和postMessage() 必须挂在worker对象上，而在worker中使用时不用这样做。原因是，在worker内部，worker是有效的全局作用域。

终止worker，主线程myWorker.terminate(); work线程直接调用close()

main.js

if (window.Worker) { /
    var myWorker = new Worker("worker.js");

    myWorker.postMessage(['test1','test2']); //发送数据给work.js

    myWorker.onmessage = function(e) { //接收来自work的数据
        console.log(e.data);
    };
}

work.js

onmessage = function(e) {
  var mainData = e.data;
  postMessage('workDate');
}

共享worker

生成一个共享worker var myWorker = new SharedWorker(‘worker.js’);

与一个共享worker通信必须通过端口对象——一个确切的打开的端口供脚本与worker通信（在专用worker中这一部分是隐式进行的）

在使用start()方法打开端口连接时，如果父级线程和worker线程需要双向通信，那么它们都需要调用start()方法。

myWorker.port.start();  // 父级线程中的调用
port.start(); // worker线程中的调用, 假设port变量代表一个端口

main.js

myWorker.port.postMessage('myworker');

work.js

onconnect = function(e) {
  var port = e.ports[0];

  port.onmessage = function(e) {
    var workerResult = e.data;
    port.postMessage('workjs');
  }
}

worker中数据的接收与发送：详细介绍

在主页面与 worker 之间传递的数据是通过拷贝，而不是共享来完成的。传递给 worker 的对象需要经过序列化，接下来在另一端还需要反序列化。页面与 worker 不会共享同一个实例，最终的结果就是在每次通信结束时生成了数据的一个副本。大部分浏览器使用结构化拷贝来实现该特性。

系统">传输 JSON 的高级方式和创建一个交换系统

如果你需要传输非常复杂的数据，还要同时在主页与 Worker 内调用多个方法，那么可以考虑创建一个类似下面的系统。

在主线程创建一个QueryableWorker的类，它接收worker的url、一个默认侦听函数、和一个错误处理函数作为参数，这个类将会记录所有的侦听的列表并且帮助我们与worker进行通信。代码如下：

function QueryableWorker(url, defaultListener, onError) {
    var instance = this,
        worker = new Worker(url),
        listeners = {};

    this.defaultListener = defaultListener || function() {};

    if (onError) {worker.onerror = onError;}

    this.postMessage = function(message) {
        worker.postMessage(message);
    }

    this.terminate = function() {
        worker.terminate();
    }

    this.addListeners = function(name, listener) {
            listeners[name] = listener;
          }

      this.removeListeners = function(name) {
            delete listeners[name];
      }

      /* 
  This functions takes at least one argument, the method name we want to query.
  Then we can pass in the arguments that the method needs.
 */
        this.sendQuery = function() {
            if (arguments.length < 1) {
                 throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); 
                 return;
            }
            worker.postMessage({
                'queryMethod': arguments[0],
                'queryArguments': Array.prototype.slice.call(arguments, 1)
            });
        }


        worker.onmessage = function(event) {
    if (event.data instanceof Object &&
        event.data.hasOwnProperty('queryMethodListener') &&
        event.data.hasOwnProperty('queryMethodArguments')) {
        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
    } else {
        this.defaultListener.call(instance, event.data);
    }
}
}

workjs代码如下

var queryableFunctions = {
    getDifference: function(a, b) {
        reply('printStuff', a - b);
    },
    waitSomeTime: function() {
        setTimeout(function() {
            reply('doAlert', 3, 'seconds');
        }, 3000);
    }
}

function reply() {
    if (arguments.length < 1) { 
        throw new TypeError('reply - takes at least one argument'); 
        return; 
    } 
    postMessage({ 
        queryMethodListener: arguments[0], 
        queryMethodArguments: Array.prototype.slice.call(arguments, 1) 
    });
}

/* This method is called when main page calls QueryWorker's postMessage method directly*/
function defaultReply(message) {
    // do something
}


onmessage = function(event) {
    if (event.data instanceof Object &&
        event.data.hasOwnProperty('queryMethod') &&
        event.data.hasOwnProperty('queryMethodArguments')) {
        queryableFunctions[event.data.queryMethod]
            .apply(self, event.data.queryMethodArguments);
    } else {
        defaultReply(event.data);
    }
}

其它类型的worker

除了专用和共享的web worker，还有一些其它类型的worker：