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-...

相关推荐
一条晒干的咸魚1 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd79417 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You25 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生37 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端