WebWorker

浏览器执行环境是单线程的，一旦出现【主线程】耗时操作，就会造成浏览器卡死，用户点击没响应等情况。

Web Worker 可以创建一个独立于主线程运行的子线程。可以将一些【可能会阻塞主线程的操作】，丢在 Worker 里去单独执行。

那为什么平时都没有意识到主线程阻塞这个问题呢？

因为下大多数情况下，我们不太关心浏览器主线程是否会被阻塞，因为同步代码执行一般都很快，慢的I/O、异步请求、定时器等操作，浏览器默认就帮我们异步操作了（变成宏、微任务了）。

比如:

• 异步请求
• 定时器
• 宏、微任务等。

---

阻塞主线程 - 一般不会出现

事实上，一般项目开发中，很难会用阻塞主线程的业务逻辑代码出现。 但是为了验证这个问题，这里可以模拟一个非常尴尬的场景。

// 创建一个 sleep 函数，模拟主线程阻塞的情况
function sleep (wait = 5000) {
    let now = new Date()
    while (new Date() - now < wait) { }
}
sleep() // 阻塞主线程
document.addEventListener.call(btn, "click", function () {
    alert('点我有反应吗?')
})

我们会在浏览器上放一个按钮，并给按钮绑定点击事件。

但由于 sleep 耗时 5 秒钟，在此过程中，主线程就阻塞了。

sleep.gif

可以发现，由于主线程被阻塞，浏览器都无法正常渲染了，都出现了黑屏。 点击按钮也半天没反应。

---

使用 Worker 解决主线程耗时造成的阻塞问题

可以将主线程一些耗时的【同步】操作，丢给 Worker 来处理，将耗时操作丢在子线程中，这样主线程就不会被阻塞，就正常处理渲染，处理用户点击，异步回到等。

WebWorker 的作用，就是为了 JavaScript 创建多线程环境，允许主线程创建 Worker 子线程，将一些【可能会阻塞主线程】的任务分配给 worker 子线程去处理。两者互不干扰。等子线程处理完成之后，在通过消息的机制把处理结果返回给主线程即可。充分利用多线程的优势。

Worker 线程毕竟占据的一个操作系统的线程资源，在 Worker 的任务执行完毕之后，即可将其关闭，释放操作系统线程资源。

---

Worker 使用说明和 API

使用说明

• 同源限制

分配给 worker 线程的脚本，必须和主线程脚本同源。（否则无法创建 worker，且双方无法通信）

• DOM限制

Worker 工作在子线程，和主线程不太一样。所以并无法操作 DOM \ BOM 等 API。（纯数据处理）

• 全局对象限制

Worker 全局对象不是 window,所以一些 window 上的全局属性和方法也无法访问。（但可以访问 Navigator 和 Location接口）

• 通信限制

由于 Worker 单独运行在一个子线程，所以和主线程通信使用发布、订阅的消息机制完成。

• 脚本限制

可以在 Worker 中使用 XMLHttpRequest 来发送异步请求。

• 运行环境限制

Worker 不能运行在 file:// 协议下。（不能直接右键打开）

---

API

Worker 的 API 十分简单，和 iframe 通信 API 类似。

主线程

// 在主线程中，使用 `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.js

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

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

利用 Worker 解决上述主线程阻塞问题

// 在浏览器主线程中..
// 定义异步事件，worker 限制耗时操作不会阻塞主线程
document.addEventListener.call(btn, "click", function () {
    alert('点我有反应吗?')
  })
  // 主线程创建 worker
const worker = new Worker('./worker.js', { name: 'my-worker' })
// 主线程给 worker 子线程发送数据
worker.postMessage({ id: 1, name: 'gqs' })
// 主线程注册子线程的 postmessage 数据回调
worker.onmessage = ({ data }) => {
    console.log('来自子线程 worker 的数据', data)
  }

// 在 worker.js 子线程中

console.log(self.name)

self.onmessage = function ({ data }) {
  console.log('接受到了来自主线程的数据:', data)
  sleep(10000) // 耗时 10s
  self.postMessage({ id: 1, name: 'gqs' })
}

self.onerror = function (err) {
  // worker 线程发生了错误!
  throw new Error(err)
}

// 模拟会阻塞主线程的耗时操作.
function sleep (wait = 5000) {
  let now = new Date()
  while (new Date() - now < wait) { }
}

我们将【会阻塞主线程】的耗时操作，丢在 worker 中去单独处理后，在查看效果。

worker 解决主线程阻塞.gif

总结

一般情况下，你不会用到 Worker ，因为浏览器主线程一般很少会出现很复杂从而导致阻塞的操作。默认的耗时操作，都会浏览器默认处理为宏、微任务了。

当遇到了类似上述那种，在主线程同步环境下造成阻塞的问题，可以使用 worker 来创建一个子线程进行处理，提高用户体验。

码云