HTML5(四)——Web Workers

一、什么是Web Worker ?

JavaScript 语言是采用单线程模型，也就是任务只能在一个线程上完成，一次只能做一件事，前面任务没执行完，后面的任务只能排队等待，由于多核 CPU 的出现，单线程带来很大不便，无法充分发挥计算机的能力。

Web Worker 就是为了 javascript 创造多线程而生的，主线程创建 worker 子线程，将一些任务分配给后台运行，等到子线程完成计算任务，再把结果返回给主线程，好处是计算密集型或高延迟的任务被 worker 负担了，主线程就会很流畅。网页加载展示可分为两部分：主进程也叫 UI 进程，子进程也叫工作进程，子进程不能控制 UI 进程，只能进行数据交互。

Web Worker 子线程一旦创建成功，就会独立于其他脚本始终运行，不会被主线程上活动打断。这样有利于随时响应主线程的通信。但是这也造成 Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。

使用 Web Worker 注意点：

1. 同源限制：分配给 Worker 线程运行的脚本，必须与主线程的脚本文件同源，否则存在跨域问题。
2. DOM限制：Worker 线程所在的全局对象，与主线程不同，无法读取主线程的DOM对象，也无法使用 window、document、parent 这些对象。但是Worker线程可以使用navigation和location对象。
3. 数据通信：Worker 线程与主线程不在一个环境，不能直接通信，必须通过消息来完成数据通信。
4. 脚本限制：Worker 线程不能执行 window 的 alert、confirm 方法。但是可以通过ajax发送请求。
5. 文件限制：Worker线程无法读取本地文件，子线程加载的脚本必须来自网络。

二、使用语法

2.1 创建Worker线程：

创建worker之前，先检查浏览器是否支持它。使用 typeof 检查，代码如下：

if( typeof Worker !== undefined ){
 console.log("支持Worker线程")
}else{
 console.log("不支持Worker")
}

检查浏览器支持 worker 之后，主线程使用 new 命令，调用 worker() 构造函数，新建 Worker 线程。

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

构造函数的参数是一个脚本文件，该文件不能是本地文件，必须来自网络脚本，该文件就是Worker 线程要执行的任务。如果该文件加载失败，Worker 就会失败。

2.2 主线程与子线程数据通信：

主线程调用 postMessage() 方法，向 Worker 发消息。postMessage(参数) 方法中参数就是传给 Worker 的数据，这个数据可以是任意格式。

myWorker.postMessage("你好")

紧接着 Worker 线程，通过 onmessage 指定监听函数，接收消息。worker.js 代码如下：

this.onmessage = function(res){
 console.log("接收到消息",res.data)
 this.postMessage("我收到消息了")
}

 

worker子进程收到消息之后，可以继续向主进程发送消息，使用 postMessage()。代码如上。

主进程也通过onmessage监听函数接收消息。

myWorker.onmessage = function(res){
 console.log("主线程收到消息：",res.data)
}

2.3 Worker线程

Worker线程内部，添加 this.onmessage 监听函数，其中 this 是子线程的全局对象，也可以替换成 self，self 代表子线程本身。等同于：

self.onmessage    《=》 this.onmessage

除了使用 self.onmessage 指定监听函数，也可以使用 this.addEventListener() 监听事件对象。上述 worker.js 代码可改为：

//写法一
this.addEventListener("message",function(res){
 console.log("res",res.data)
})
//写法二
addEventListener("message",function(res){
 this.console.log("1",res.data)
})

 

2.4 错误处理

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

// 写法一
myWorker.onerror = function(e){
 console.log('e',e)
}
//写法二
myWorker.addEventListener("error",function(e){
 console.log("e",e)
})

worker 子线程也可以监听 error 事件。

2.5 关闭 Worker

Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。主线程和子线程都可以关闭。

//主线程关闭
myWorker.terminate() 

//子线程关闭
self.close() //方法一
this.close() //方法二

 

三、同一个网页的Web Worker

通常情况下，Worker 载入的是一个单独的 javascript 文件，但是也可以载入与主线程在同一个网页的代码。网页中添加 Worker 脚本，必须注意指定script标签的type属性是一个浏览器不认识的值，否则就会失去意义。如：

<script type="app/worker" id="wrs">
 this.onmessage = function(res){
  console.log("接收参数",res.data)
 }
</script>

然后，需要读取这段代码，先将嵌入网页的脚本代码转成二进制对象，然后为这个二进制对象生成url，再让worker加载url,这样就实现了主进程和worker在同一个网页内。代码如下：

<script>
 var blob = new Blob([document.querySelector("#wrs").textContent]);
 var url = window.URL.createObjectURL(blob);
 var worker = new Worker(url)
 worker.postMessage("发送数据")
</script>

 

四、Worker 属性和方法总结

Worker构造函数方法：

• Worker.postMessage() - 发送消息。
• Worker.onmessage() - 监听子线程发送过来的数据。
• Worker.onmessageerror() - 发送数据无法序列化时触发事件。
• Worker.onerror() - 错误处理。
• Worker.terminate() - 结束Worker。

子进程属性方法：

Worker() 构造函数，可以接受两个参数，第一个是脚本的地址，第二个是参数是配置对象，该对象指定Worker的名称。如：

var myWorker = new Worker('worker.js', { name : 'myWorker' });

• self.name - Worker 的名字
• self.onmessage - 接收消息
• self.postmessage - 发送数据
• self.onerror - 错误处理
• self.onmessageerror - 发送的数据无法序列化成字符串时触发事件
• self.close - 关闭Worker线程
• self.importScript() - 加载js脚本