共计 7067 个字符，预计需要花费 18 分钟才能阅读完成。
转载自 阮一峰老师的《Web Worker 应用教程》
1 概述
JavaScript 语言采纳的是单线程模型，也就是说，所有工作只能在一个线程上实现，一次只能做一件事。后面的工作没做完，前面的工作只能等着。随着电脑计算能力的加强，尤其是多核 CPU 的呈现，单线程带来很大的不便，无奈充分发挥计算机的计算能力
Web Worker 的作用，就是为 JavaScript 发明多线程环境，容许主线程创立 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后盾运行，两者互不烦扰。等到 Worker 线程实现计算工作，再把后果返回给主线程。这样的益处是，一些计算密集型或高提早的工作，被 Worker 线程累赘了，主线程（通常负责 UI 交互）就会很晦涩，不会被阻塞或拖慢。
Worker 线程一旦新建胜利，就会始终运行，不会被主线程上的流动（比方用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。然而，这也造成了 Worker 比拟消耗资源，不应该适度应用，而且一旦应用结束，就应该敞开。
Web Worker 有以下几个应用留神点。
1：同源限度
调配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源
2：DOM 限度
Worker 线程所在的全局对象，与主线程不一样，无奈读取主线程所在网页的 DOM 对象，也无奈应用document、window、parent 这些对象。然而，Worker 线程能够 navigator 对象和 location 对象。
3：通信联系
Worker 线程和主线程不在同一个上下文环境，它们不能间接通信，必须通过音讯实现
4：脚本限度
Worker 线程不能执行alert() 办法和 confirm() 办法，但能够应用 XMLHttpRequest 对象收回 AJAX 申请。
5：文件限度
Worker 线程无奈读取本地文件，即不能关上本机的文件系统（file://），它所加载的脚本，必须来自网络。
2 根本用法
2.1 主线程
主线程采纳 new 命令，调用 Worker() 构造函数，新建一个 Worker 线程
var worker = new Worker('work.js');Worker()构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的工作。因为 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有胜利（比方 404 谬误），Worker 就会默默地失败。
而后，主线程调用 worker.postMessage() 办法，向 Worker 发消息。
worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});worker.postMessage()办法的参数，就是主线程传给 Worker 的数据。它能够是各种数据类型，包含二进制数据。
接着，主线程通过 worker.onmessage 指定监听函数，接管子线程发回来的音讯。
worker.onmessage = function (event) {console.log('Received message' + event.data);
doSomething();}
function doSomething() {
// 执行工作
worker.postMessage('Work done!');
}下面代码中，事件对象的 data 属性能够获取 Worker 发来的数据。
Worker 实现工作当前，主线程就能够把它关掉。
worker.terminate();2.2 Worker 线程
Worker 线程外部须要有一个监听函数，监听 message 事件。
self.addEventListener('message', function (e) {self.postMessage('You said:' + e.data);
}, false);下面代码中，self代表子线程本身，即子线程的全局对象。因而，等同于上面两种写法。
// 写法一
this.addEventListener('message', function (e) {this.postMessage('You said:' + e.data);
}, false);
// 写法二
addEventListener('message', function (e) {postMessage('You said:' + e.data);
}, false);除了应用 self.addEventListener() 指定监听函数，也能够应用 self.onmessage 指定。监听函数的参数是一个事件对象，它的 data 属性蕴含主线程发来的数据。self.postMessage()办法用来向主线程发送音讯。
依据主线程发来的数据，Worker 线程能够调用不同的办法，上面是一个例子。
self.addEventListener('message', function (e) {
var data = e.data;
switch (data.cmd) {
case 'start':
self.postMessage('WORKER STARTED:' + data.msg);
break;
case 'stop':
self.postMessage('WORKER STOPPED:' + data.msg);
self.close(); // Terminates the worker.
break;
default:
self.postMessage('Unknown command:' + data.msg);
};
}, false);下面代码中，self.close()用于在 Worker 外部敞开本身。
2.3 Worker 加载脚本
Worker 外部如果要加载其余脚本，有一个专门的办法importScripts()。
importScripts('script1.js');
// 该办法能够同时加载多个脚本。importScripts('script1.js', 'script2.js');2.4 错误处理
主线程能够监听 Worker 是否产生谬误。如果产生谬误，Worker 会触发主线程的 error 事件。
worker.onerror(function (event) {
console.log(['ERROR: Line', e.lineno, 'in', e.filename, ':', e.message].join(''));
});
// 或者
worker.addEventListener('error', function (event) {// ...});Worker 外部也能够监听 error 事件。
2.5 敞开 Worker
应用结束，为了节俭系统资源，必须敞开 Worker。
// 主线程
worker.terminate();
// Worker 线程
self.close();3 数据通信
后面说过，主线程与 Worker 之间的通信内容，能够是文本，也能够是对象。须要留神的是，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的批改，不会影响到主线程。事实上，浏览器外部的运行机制是，先将通信内容串行化，而后把串行化后的字符串发给 Worker，后者再将它还原。
主线程与 Worker 之间也能够替换二进制数据，比方 File、Blob、ArrayBuffer 等类型，也能够在线程之间发送。上面是一个例子。
// 主线程
var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}
worker.postMessage(uInt8Array);
// Worker 线程
self.onmessage = function (e) {
var uInt8Array = e.data;
postMessage('Inside worker.js: uInt8Array.toString() =' + uInt8Array.toString());
postMessage('Inside worker.js: uInt8Array.byteLength =' + uInt8Array.byteLength);
};然而，拷贝形式发送二进制数据，会造成性能问题。比方，主线程向 Worker 发送一个 500MB 文件，默认状况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript 容许主线程把二进制数据间接转移给子线程，然而一旦转移，主线程就无奈再应用这些二进制数据了，这是为了防止出现多个线程同时批改数据的麻烦场面。这种转移数据的办法，叫做 Transferable Objects。这使得主线程能够疾速把数据交给 Worker，对于影像解决、声音解决、3D 运算等就十分不便了，不会产生性能累赘。
如果要间接转移数据的控制权，就要应用上面的写法。
// Transferable Objects 格局
worker.postMessage(arrayBuffer, [arrayBuffer]);
// 例子
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);4 同页面的 Web Worker
通常状况下，Worker 载入的是一个独自的 JavaScript 脚本文件，然而也能够载入与主线程在同一个网页的代码。
<body>
<script id="worker" type="app/worker">
self.addEventListener('message', function (e) {console.log(e,e.data)
postMessage('some message');
}, false);
</script>
<script>
var blob = new Blob([document.querySelector('#worker').textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);
worker.postMessage('Hello World');
worker.onmessage = function (e) {console.log('worker', e);
};
</script>
</body>下面是一段嵌入网页的脚本，留神必须指定 <script> 标签的 type 属性是一个浏览器不意识的值，上例是app/worker。
而后，读取这一段嵌入页面的脚本，用 Worker 来解决。
var blob = new Blob([document.querySelector('#worker').textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);
worker.onmessage = function (e) {// e.data === 'some message'};下面代码中，先将嵌入网页的脚本代码，转成一个二进制对象，而后为这个二进制对象生成 URL，再让 Worker 加载这个 URL。这样就做到了，主线程和 Worker 的代码都在同一个网页下面。
5 实例：Worker 线程实现轮询
有时，浏览器须要轮询服务器状态，以便第一工夫得悉状态扭转。这个工作能够放在 Worker 外面。
function createWorker(f) {var blob = new Blob(['(' + f.toString() +')()']);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);
return worker;
}
var pollingWorker = createWorker(function (e) {
var cache;
function compare(new, old) {...};
setInterval(function () {fetch('/my-api-endpoint').then(function (res) {var data = res.json();
if (!compare(data, cache)) {
cache = data;
self.postMessage(data);
}
})
}, 1000)
});
pollingWorker.onmessage = function () {// render data}
pollingWorker.postMessage('init');下面代码中，Worker 每秒钟轮询一次数据，而后跟缓存做比拟。如果不统一，就阐明服务端有了新的变动，因而就要告诉主线程。
6 实例：Worker 新建 Worker
Worker 线程外部还能再新建 Worker 线程（目前只有 Firefox 浏览器反对）。上面的例子是将一个计算密集的工作，调配到 10 个 Worker。
主线程代码如下。
var worker = new Worker('worker.js');
worker.onmessage = function (event) {document.getElementById('result').textContent = event.data;
};Worker 线程代码如下。
// settings
var num_workers = 10;
var items_per_worker = 1000000;
// start the workers
var result = 0;
var pending_workers = num_workers;
for (var i = 0; i < num_workers; i += 1) {var worker = new Worker('core.js');
worker.postMessage(i * items_per_worker);
worker.postMessage((i + 1) * items_per_worker);
worker.onmessage = storeResult;
}
// handle the results
function storeResult(event) {
result += event.data;
pending_workers -= 1;
if (pending_workers <= 0)
postMessage(result); // finished!
}下面代码中，Worker 线程外部新建了 10 个 Worker 线程，并且顺次向这 10 个 Worker 发送音讯，告知了计算的终点和起点。计算工作脚本的代码如下。
var start;
onmessage = getStart;
function getStart(event) {
start = event.data;
onmessage = getEnd;
}
var end;
function getEnd(event) {
end = event.data;
onmessage = null;
work();}
function work() {
var result = 0;
for (var i = start; i < end; i += 1) {
// perform some complex calculation here
result += 1;
}
postMessage(result);
close();}7 API
7.1 主线程
浏览器原生提供 Worker() 构造函数，用来供主线程生成 Worker 线程。
var myWorker = new Worker(jsUrl, options);Worker()构造函数，能够承受两个参数。第一个参数是脚本的网址（必须恪守同源政策），该参数是必须的，且只能加载 JS 脚本，否则会报错。第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来辨别多个 Worker 线程。
// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker'});
// Worker 线程
self.name // myWorkerWorker()构造函数返回一个 Worker 线程对象，用来供主线程操作 Worker。Worker 线程对象的属性和办法如下。
Worker.onerror：指定 error 事件的监听函数。Worker.onmessage：指定 message 事件的监听函数，发送过去的数据在 Event.data 属性中。Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无奈序列化成字符串时，会触发这个事件。Worker.postMessage()：向 Worker 线程发送音讯。Worker.terminate()：立刻终止 Worker 线程。7.2 Worker 线程
Web Worker 有本人的全局对象，不是主线程的 window，而是一个专门为 Worker 定制的全局对象。因而定义在window 下面的对象和办法不是全副都能够应用。
Worker 线程有一些本人的全局属性和办法。
self.name：Worker 的名字。该属性只读，由构造函数指定。self.onmessage：指定 message 事件的监听函数。self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无奈序列化成字符串时，会触发这个事件。self.close()：敞开 Worker 线程。self.postMessage()：向产生这个 Worker 线程发送音讯。self.importScripts()：加载 JS 脚本。
