Web Worker
Web Worker 用于在后台线程中运行脚本，worker 线程可以执行任务而不干扰用户界面。
worker 线程中全局上下文不是 window，可以使用 self 或 gloablThis 访问。
Worker
以下代码包含创建、监听、终止一个worker
js
// 在主线程或worker中，使用 Worker 构造函数
const myWorker = new Worker("worker.js"); // "worker.js"是脚本的 URL，遵守同源策略
myWorker.onmessage = (e) => {
console.log("Message received from worker script", e);
}
myWorker.onerror = (e) => {
console.log("Error from worker script", e);
e.preventDefault(); // 阻止默认行为：抛出worker内的异常
}
function postMessage() {
myWorker.postMessage("Hello"); // 向worker发送消息
}
function terminate() {
myWorker.terminate(); // 终止worker线程
}js
// worker.js
postMessage("worker 向主线程发送消息");
onmessage = (e) => {
console.log("Message received from main script", e);
};
onerror = (e) => {
console.log("error in worker:", e);
}嵌入式创建 worker
Worker() 接受的第一个参数是一个脚本URL，可以通过 URL.createObjectURL(blob) 满足在同个文件内创建和使用worker。
html
<script>
const blob = new Blob(
[ document.querySelector('script[type="data"]').textContent ],
{ type: "text/javascript" },
)
const embeddedWorker = new Worker( URL.createObjectURL(blob) )
embeddedWorker.postMessage("Hello worker")
</script>
<script type="data"> //使用非`type="text/javascript"`避免浏览器运行
//在这里写嵌入的worker代码
console.log('嵌入式创建的worker');
onmessage = (e) => {
console.log("收到消息", e.data);
}
</script>SharedWorker
SharedWorker 创建的线程可以被多个页面共享。
SharedWorker 的用法是在Worker的基础上，通过port属性去访问 shared worker 的方法
js
// 在主线程中，使用 SharedWorker 构造函数
const sharedWorker = new SharedWorker("workerShared.js")
sharedWorker.port.start() //使用addEventListener时，没有start将收不到消息
sharedWorker.port.addEventListener("message", (e) => {
console.log("SharedWorker发来的消息：", e.data);
})
function postToSharedWorker(){
sharedWorker.port.postMessage("Hello shared worker")
}js
onconnect = function (e) {
var port = e.ports[0];
port.addEventListener("message", function (e) {
console.log(e) // 不会出现在页面的控制台上
port.postMessage(`I'm shared worker`);
});
port.start(); // Required when using addEventListener.
}SharedWorker 兼容性差，而Worker 兼容性好。
worker上下文没有 SharedWorker 构造函数，因此不支持在worker中创建sharedWorker。