前言

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

概念

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

为什么使用WebWorker？

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

使用场景

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

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

示例

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

主线程

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

js 复制代码

      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 将计算结果返回主线程。

js 复制代码

    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)
    }

运行结果

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

总结

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

面试官：讲一下你对 WebWorker 的理解

前言

概念

为什么使用WebWorker？

使用场景

示例

主线程

worker.js

运行结果

总结