Web Worker 为 JavaScript 创建多线程环境
主线程可以创建 Worker 线程，并将一些高延迟的任务分配给 Worker 线程在后台运行
而主线程只会负责渲染和交互，从而保证页面的流畅性
Web Worker 有两种类型，分别是 Dedicated Web Worker 和 Shared Web Worker
- Dedicated Web Worker：只有一个页面可以使用这个 Web Worker
- Shared Web Worker：多个同源页面可以共享一个 Web Worker，为跨页面通信提供一种解决方案
下面介绍 Dedicated Web Worker
主线程通过构造函数 Worker()，创建一个 Worker 线程，并在参数中指定需要执行的脚本文件
var worker = new Worker('worker.js')
构造函数返回一个 Worker 对象，便于主线程与 Worker 线程通信，Worker 对象常用的属性和方法如下：
- onerror：用于指定 error 事件的监听函数，当 Worker 发生错误时触发
- onmessage：用于指定 message 事件的监听函数，当接收到传递的数据时触发
- onmessageerror：用于指定 messageerror 事件的监听函数，当数据无法进行反序列化时触发
- postMessage()：传递数据给 Worker 线程
- terminate()：终止 Worker 线程
<!DOCTYPE html> <html> <head> <script> var worker; function submit() { if (typeof(Worker) === 'undefined') { return } if (typeof(worker) === "undefined") { worker = new Worker('worker.js') } let input = document.getElementById('data').value worker.postMessage(input) worker.onmessage = function(event) { let result = event.data document.getElementById('result').innerText = result worker.terminate() worker = undefined } worker.onerror = function(event) { console.log('出错的信息', event.message) console.log('出错的文件', event.filename) console.log('出错的行数', event.lineno) console.log('出错的列数', event.colno) worker.terminate() worker = undefined } } </script> </head> <body> <input type="text" id="data" name="data" placeholder="Please Enter Something"> <button onclick="submit()">Reverse String</button> <span id="result"></span> </body> </html>
Worker 线程有一个自己的全局对象，self 和 this 都提供对该对象的引用，常用的属性和方法如下：
- onmessage：用于指定 message 事件的监听函数，当接收到传递的数据时触发
- onmessageerror：用于指定 messageerror 事件的监听函数，当数据无法进行反序列化时触发
- importScripts()：用于加载其它脚本
- postMessage()：传递数据给主线程
- close()：关闭 Worker 线程
// worker.js this.onmessage = function(event) { let data = event.data let result = reverse(data) this.postMessage(result) this.close() } function reverse(content) { return content.split('').reverse().join('') }
使用 Web Worker 需要注意以下的点：
- 主线程分配给 Worker 线程的脚本文件，不能从本地读取，它必须来自网络
- 主线程分配给 Worker 线程的脚本文件，必须与主线程的脚本文件同源，准确来说应该是与页面文档同源
- Worker 线程不能访问 window、document、parent 对象，但可以使用 navigator、location 对象
- Worker 线程不能使用 alert、confirm，但可以使用 setTimeout、setInterval、XMLHttpRequest
- 主线程和 Worker 线程不能直接通信，必须通过消息传递，消息传递有两种方式，拷贝和转让
拷贝：拷贝原始数据，产生一份副本，将副本传递给目标线程，在传递较大的数据时比较消耗性能
转让：将原始数据的所有权转让给目标线程，原来线程不再具有这个数据
在默认的实现中，除 ArrayBuffer 外都是拷贝传递
