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 上的全局属性和方法也无法访问。(但可以访问 NavigatorLocation接口)

  • 通信限制

由于 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 来创建一个子线程进行处理,提高用户体验。

码云

你可能感兴趣的:(WebWorker)