详解 WebWorker 的概念、使用场景、示例

前言

提到 WebWorker，可能有些小伙伴比较陌生，不知道是做什么的，甚至不知道使用场景，今天这篇文章就带大家一起简单了解一下什么是 webworker！

概念

WebWorker 实际上是运行在浏览器后台的一个单独的线程，因此可以执行一些耗时的操作而不会阻塞主线程。WebWorker 通过与主线程之间传递消息实现通信，这种通信是双向的。WebWorker不能直接访问 DOM，也不能使用像 window 对象这样的浏览器接口对象，但可以使用一些WebWorker 标准接口和 Navigator 对象的部分属性和方法。

为什么使用WebWorker？

1. 提高应用响应能力：主线程被独占执行一些耗时的计算或操作时，会导致UI无响应。WebWorker 可以把这些任务转移到后台线程，从而保证主线程的运行，提高应用的响应能力。
2. 充分利用多核CPU：现代CPU都是多核的，WebWorker 可以让 Web 应用利用多核 CPU 的并行计算能力，充分发挥计算机硬件性能。
3. 避免渲染阻塞：JavaScript 运行在主线程，如果主线程一直占用，就无法执行 GUI 渲染任务，导致界面渲染受阻。WebWorker 把一些费时任务分流到后台线程就可以避免这一问题。
4. 后台持续运行：WebWorker 所在后台线程可持续运行，即使页面被挂起或最小化，任务仍在后台执行，非常适合一些需要长时间运行的操作。

使用场景

一般来说,当遇到如下几种情况时可以考虑使用 WebWorker:

1. 大量数据的计算/处理：比如图像处理、数据分析等
2. 长时间运行的操作：如一些复杂的数学计算
3. 非阻塞式操作：希望执行一些耗时操作时不阻塞主线程

示例

假设我们有一个需要计算斐波那契数列的任务，我们可以使用 Web Worker 来进行计算，以避免阻塞主线程。以下是一个简单的示例：

主线程

主线程创建 worker 实例，向子线程通过 postMessage 发送消息，通过 onmessage 监听子线程返回的数据。

  const myWorker = new Worker('./worker.js')

  myWorker.onmessage = function (e) {
    console.log('Fibonacci result:', e.data)
  }

  myWorker.postMessage(40) // 请求计算斐波那契数列的第40项

worker.js

在同级目录下创建 worker.js文件，通过 onmessage 接收主线程发来的数据，计算后通过postMessage 将计算结果返回主线程。

self.onmessage = function (e) {
  const n = e.data
  let a = 0,
    b = 1,
    temp
  for (let i = 2; i <= n; i++) {
    temp = a
    a = b
    b = temp + b
  }
  self.postMessage(b)
}

运行结果

可以看到主线程打印出 webworker 计算的运行结果

Vue、React项目使用

接下来为大家演示 vue 以及 react 项目如何使用

Vue使用

vue版本："vue": "^2.6.14",vue-cli版本：@vue/cli 5.0.8安装 worker-loader

页面使用

<template><div>我的页面</div></template>
<script>
export default {
  name: 'MyselfView',
  data() {
    return {
      worker: null,
    }
  },
  mounted() {
    // 创建 WebWorker 实例
   this.worker = new Worker(new URL('./worker.js', import.meta.url))
    console.log('worker: ', this.worker)
    this.worker.postMessage(40) // 请求计算斐波那契数列的第40项

    this.worker.addEventListener('message', (event) => {
      console.log('Fibonacci result:', event.data)
    })
  },
  beforeDestroy() {
    // 组件销毁时终止 WebWorker
    this.worker.terminate()
  },
}
</script>

worker.js

// worker.js
self.addEventListener('message', (e) => {
  console.log('e: ', e)
  const n = e.data
  let a = 0,
    b = 1,
    temp
  for (let i = 2; i <= n; i++) {
    temp = a
    a = b
    b = temp + b
  }
  self.postMessage(b)
})

效果 

React使用 

react版本： "react": "^18.2.0"

import React, { useEffect } from 'react'
// import WorkerScript from './worker.worker.js'

const Demo = () => {
  useEffect(() => {
    const worker = new Worker(new URL('./worker.worker.js', import.meta.url))

    worker.onmessage = function (e) {
      console.log('Fibonacci result:', e.data)
    }
    worker.postMessage(40) // 请求计算斐波那契数列的第40项
    // 使用 worker ...
    return () => worker.terminate()
  }, [])

  return (
    <div>
      <p>count的值</p>
    </div>
  )

效果

注意

由于我们在项目开发时，使用不同的打包工具(vite/webpack)。幸运的是，最新版的vite/webpack都支持Web Worker了。

我们可以通过：new URL()的方式 --vite/webpack都支持

new Worker(
  new URL(
    './worker.js', 
    import.meta.url
  )
);

总结

WebWorker是一种在 Web 应用中实现多线程运行的技术，可以将耗费 CPU 的任务交给后台线程处理，避免阻塞主线程，从而提高Web应用的响应性能和用户体验。 总之，WebWorker的引入解决了Web应用长期以来在单个线程中运行所带来的诸多问题，有效提升了Web应用的运行性能和用户体验。