web worker数量是不是越多越好?

背景

一个CPU密集型的任务,如果可以用web worker并行处理,创建的Web Worker线程是否越多越好呢? 如果不是的话,创建多少个最合适呢?

实验

我们以用JS实现从1累加到100亿来模拟这个问题。

js 复制代码
// index.js
const num = 10000000000
let sum = 0
for(let i = 1; i < num; i++) {
    sum += i
}

上面的运算如何放在JS主线程里运行话,会造成阻塞。因此为了加速运算,需要开启web worker来并行处理。

  1. 新建多个web worker对象;
  2. 每个web worker只做一段数据的累加;
  3. 每当任意一个web worker运算完成之后,将值累加到一个全局变量上;
  4. 所有的web worker运算完成,则全局变量的值即为结果值。
js 复制代码
// index.js
const workerArray = [
  new Worker("worker.js"), 
  new Worker("worker.js"), 
  ...
]

let sum = 0 // 累加结果
let count = 0 // worker运行完成的个数
const startTimestamp = performance.now();

// 监听返回值
workerArray.forEach(item => {
    item.onmessage = function(event) {
        sum += event.data
        count++
        if(count === workArray.length) {
        // 当所有的worker运行完成
            const endTimestamp = performance.now()
            console.log(`Worker total sum: ${sum}, time cost: ${endTimestamp - startTimestamp}`)
        }
    }
})
 
// 调用worker.js进行运算
let start = 1 // 每个worker计算的起始值
const MAX_DURATION = Math.ceil(num / workerArray.length)
workerArray.forEach(item => {
    // 每个worker计算的结束值
    const end = Math.min(start + MAX_DURATION, num)
    item.postMessage({ start, end })
    start = end + 1 // 更新起始值
}); 

/////////////////////////////////
// worker.js
self.onmessage = function(event) {
  const start = event.data.start
  const end = event.data.end
  let sum = 0
  for(let i = start; i <= end; i++) {
    sum += i
  }
  self.postMessage(sum);
}

下图是我们运行多次的结果。x轴表示我们开启的web worker数量,y轴表示运行完获取总累加值需要的时间(ms)。

随着x值的增加,y值减少。当x到了一定值以后,y的减少就不明显了。这个值大概是6。

原因其实很简单,因为线程的并行需要依赖于CPU的核数。下图是我当前电脑的基本配置,可以看到一共有6个核。

查阅资料可以知道,可以通过APInavigator.hardwareConcurrency获取当前机器的CPU的逻辑核数。因此代码我们可以简单修改下:

js 复制代码
const workerArray = new Array(navigator.hardwareConcurrency).fill(new Worker('./worker.js'))

...
// 其他代码不变

结论

大部分需要通过web worker并行运算的场景下,JS主线程开启web worker的数量最好不要超过navigator.hardwareConcurrency的数量,否则过多的web worker不仅不能带来性能的提升,反而会增加额外通信和内存开销。

其他

代码地址:github.com/wdskuki/js-...

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css