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

相关推荐
海天胜景几秒前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘20 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾25 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉33 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。39 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端