一、简介
Worker 对象用于创建独立后台线程，可以处理一些耗时的操作且不会阻塞主线程(通常是UI线程)。可用的 Worker有：专用worker、共享worker、Service Worker。
二、专用worker
只能被单一脚本调用创建后台线程。但在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性，可用方法和对象，看这里!
1、worker 实例
创建 work 线程并与主线程进行通讯。主线程和 worker 线程之间通过postMessage() 发送信息并用onmessage 接收消息。
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>work</title>
</head>
<body>
<h1>点击按钮向 work 发送消息！</h1>
<button id="number">click</button>
<script>
// 1、创建 work线程 和 接收work信息的处理函数
const myWorker = new Worker('worker.js');
myWorker.onmessage = function (e) {
alert(e.data);
}
// 2、发送信息给 work线程
const btn = document.querySelector('#number');
btn.onclick = function () {
myWorker.postMessage("btn click");
}
</script>
</body>
</html>
// worker.js
// 3、接收消息
onmessage = function (e) {
const workerResult = e.data + " : worker send";
// 4、发送消息给主线程
postMessage(workerResult);
}
2、DedicatedWorkerGlobalScope
专用worker的全局对象，也可以用 self 来访问。
三、SharedWorker
可以被多个脚本调用并创建多个后台线程，前提是这些脚本所在页面必须同源（相同的协议、host 以及端口）。
1、简单实例
创建 SharedWorker 线程并与主线程进行通讯。
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>work</title>
</head>
<body>
<h1>点击按钮向 work 发送消息！</h1>
<button id="number">click</button>
<script>
if (!!window.SharedWorker) {
// 1、创建 sharedwork线程 和 接收sharedwork信息的处理函数
const myWorker = new SharedWorker('worker.js');
myWorker.port.onmessage = function (e) {
alert(e.data);
console.log('Message received from worker');
}
// 2、发送信息给 sharedwork线程
const btn = document.querySelector('#number');
btn.onclick = function () {
myWorker.port.postMessage("btn click");
console.log('Message posted to worker');
}
} else {
console.log("此浏览器不支持 SharedWorker ！")
}
</script>
</body>
</html>
// worker.js
// 3、消息处理函数
onconnect = function (e) {
var port = e.ports[0];
port.onmessage = function (e) {
var workerResult = e.data + " : worker send";
// 4、发送消息给主线程
port.postMessage(workerResult);
}
}
2、SharedWorkerGlobalScope
共享worker的全局对象，也可以用 self 来访问。
四、Service Worker
Service workers 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。
Service workers 只能用于 https，不能用于 Firefox浏览器 的隐身模式。
Service workers大量使用Promise，因为通常它们会等待响应后继续，并根据响应返回一个成功或者失败的操作。Promise非常适合这种场景。
目前只有 Chrome、Firefox 对此功能有比较完整的支持，其他浏览器暂时不支持。