面试官:讲一下你对 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 向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应用的运行性能和用户体验。

相关推荐
new出一个对象3 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥4 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript