浅谈H5 Web Worker

我们在日常开发的时候偶尔会碰到需要异步操作，不影响主线程的计算的需求，Web Worker就为我们提供了这种方法。单独创建一个线程，执行任务的时候不会干扰到页面以及用户的交互，虽然是独立的存在还是可以通过api和主线程进行消息传递。

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

一、使用：初始化worker实例

var worker = new Worker('./worker.js')

接收一个路径的字符串，我们可以在文件worker.js里写下一些代码：

console.log('Hi, welcome to worker.js')

二、数据通信

当我们实例化一个 Worker 线程后，Worker不会相互，或者与主程序共享任何作用域或资源——那会将所有的多线程编程的噩梦带到我们面前——取而代之的是一种连接它们的基本事件消息机制。因此他们需要通过基于事件监听机制的message来进行通信，我们在new Worker()后悔返回一个实例对象，它包含了一个postMessage的方法，我们可以通过调用这个方法来给worker线程传递信息，我们也可以给这个对象监听事件，从而在worker线程中出发事件通信的时候能接收到数据。

main.js

varworker =newworker('./worker.js')

worker.addEventListener('message',function(e){console.log('worker receive:', e.data )}

worker.postMessage('hello worker,this is main.js')

worker.js (调用全局函数postMessage和全局的onmessage赋值来发送和监听数据和事件了。)

// 监听事件

onmessage =function(e){console.log('WORKER RECEIVE：', e.data);

// 发送数据事件

postMessage('Hello, this is worker.js');}

三、错误监听

当 worker 出现运行中错误时，它的 onerror 事件处理函数会被调用。它会收到一个扩展了 ErrorEvent 接口的名为 error的事件。

该事件不会冒泡并且可以被取消；为了防止触发默认动作，worker 可以调用错误事件的 preventDefault() 方法。

错误事件主要有三个属性：

1、message: 可读性良好的错误消息

2、filename: 发生错误的脚本文件名

3、ineno: 发生错误时所在脚本文件的行号

列如：

var worker = new Worker('./worker.js');

// 监听消息事件

worker.addEventListener('message', function (e) {

  console.log('MAIN RECEIVE： ', e.data);

});

// 也可以使用 onMessage 来监听事件：

// 监听 error 事件

worker.addEventListener('error', function (e) {

  console.log('MAIN ERROR：', e);

  console.log('MAIN ERROR：', 'filename:' + e.filename + '---message:' + e.message + '---lineno:' + e.lineno);

});

// 触发事件，传递信息给 Worker

worker.postMessage({

  m: 'Hello Worker, this is main.js'

});

四、Web Workers支持的js的t特性

由于在 Worker 线程的运行环境中没有 window 全局对象，也无法访问 DOM 对象，所以一般来说我们在这只能执行纯JavaScript的计算操作，当然1我们那：

1、setTimeout()， clearTimeout()， setInterval()， clearInterval()：有了设计个函数，就可以在 Worker 线程中执行定时操作了；

2、XMLHttpRequest 对象：意味着我们可以在 Worker 线程中执行 ajax 请求；

3、navigator 对象：可以获取到 ppName，appVersion，platform，userAgent 等信息；

4、location 对象（只读）：可以获取到有关当前 URL 的信息；

5、应用缓存

6、使用 importScripts() 引入外部 script

7、创建其他的 Web Worker