Web Workers 使用

2023年10月20日约421字预计需要1分钟

使用场景

耗时，后台下载
大量复杂计算，数据处理
实时通信
解决主线程耗时造成的阻塞问题

在 worker 线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在 worker 内，不能直接操作 DOM 节点，也不能使用 window 对象的默认方法和属性。但是你可以使用大量 window 对象之下的东西，包括 WebSockets，以及 IndexedDB 等数据存储机制！

使用postMessage和onMessage进行通信！

worker

// 是否可以使用Worker
if (window.Worker) {
  // …
}

主线程中：

// 在主线程中，使用 `new Worker` 构造函数，来创建一个 `Worker` 实例。
const worker = new Worker('worker.js',{name: 'worker'})
// 主线程中，向子线程 worker 发送数据 
worker.postMessage(data) // 任何数据
// 主线程中，监听子线程 worker 回发的数据
worker.onMessage = (data) => {
    console.log('来自子线程的数据',data)
}
// 主线程中，监听 worker 错误
worker.onerror = (err) => {}

// 主线程关闭 worker 子线程
worker.close()

子线程worker：

//在 worker 线程中监听主线程发送过来的数据
self.onmessage = (data) => {
    console.log('主线程发送过来的数据',data)
}
// 在 worker 中，向主线程发送数据
self.postMessage(data)
// 在 worker 中监听错误
self.onerror = (err) => {}

// 在 worker 中关闭自己
self.close()

引入脚本：

importScripts(); /* 什么都不引入 */
importScripts("foo.js"); /* 只引入 "foo.js" */
importScripts("foo.js", "bar.js"); /* 引入两个脚本 */
importScripts("//example.com/hello.js"); /* 你可以从其他来源导入脚本 */
// 同步运行代码

共享worker

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers#web_workers_api