web Worker的使用

web Worker

什么是web Worker

JavaScript是单线程的。所有的任务只能在同一个线程中进行，一次只能执行一个任务，后面的只能等待。而且现在计算机大多都是多核的，单线程不能有效的利用计算机的资源。
web Worker是HTML5 提出的JavaScript多线程解决方案。我们可以将一些大计算量的操作交给web worker去运算，而不必“冻结”页面。

web Worker的作用

为JavaScript创建多线程。允许主线程创建子线程，将主线程的复杂的任务分配给子线程去执行。在主线程运行的同时，子线程也在后台执行，二者互不影响。等子线程处理完成之后，再将结果传递给主线程。这样，子线程分担了主线程的负载，让主线程的运行“顺畅”起来，不会被阻塞。

web Worker的使用限制

• 同源限制。分配的worker线程的脚本文件，必须和主线程同源。
• DOM限制。worker线程所在的脚本文件，无法读取主线程所在的网页的DOM对象。但是可以使用 location 和 navigator 对象。
• 主线程和子线程通讯。主线程和worker线程不在同一个上下文对象，所以必须使用消息进行通讯。
• 脚本限制。worker线程中不允许使用 alert 和 confirm 。但是可以使用 XMLHttpRequest 对象。
• 文件限制。worker线程不能读取本地文件，它所加载的脚本文件，必须来源于网络。

基本使用

主线程

主线程新建worker线程：

//new Worker(jsUrl, options);
let worker = new Worker('child.js');

Worker 构造函数的参数是一个脚本文件，该脚本文件就是要Worker线程的脚本文件。该文件必须来自网络，否则则会失败。Worker接收第二个参数，该参数是对象形式，它的一个作用就是指定Worker的名称。

主线程和子线程通讯

主线程调用 worker.postMessage() 方法，向子线程传递数据。

worker.postMessage('准备好了吗？开始通信!')；
//or
worker.postMessage({
  type: 'common',
  message: "准备好了吗？开始通信!"
});

主线程指定监听事件

主线程使用 worker.onmessage() 方法，监听从子线程发送的数据：

worker.onmessage = function(data){
    console.log('主线程收到子线程发的消息！！！');
}

错误处理

主线程中可以监听worker是否发生错误。如果发生错误，worker就会触发主线程的 onerror 方法。

worker.onerror = function(e){
    //e.lineno ：错误代码的行数
  //e.filename ：发生错误的文件
  //e.message ：错误详细信息
}

终止执行

当任务完成以后，主线程可以通过 worker.terminate() 方法，终止worker的执行。

worker.terminate();

worker线程

worker监听函数

在worker中，使用监听函数，来获取主线程发送的数据：

self.addEventListener('message', function(e) {
    console.log(`子线程接收消息：${e.data.message}`);
    self.postMessage(`我收到你发的消息了! 你发的消息是：${e.data.message}`)
})

上述代码中， self 代表子线程自身，即子线程的全局对象。

worker线程加载脚本

如果我们在worker中需要引入其他脚本文件的时候，可以使用 importScripts() 方法导入。

importScripts('underscore.js');

导入之后，就可以在worker线程中使用了。

关闭worker

当worker执行完毕之后，可以将其关闭：

self.close()