请教一个 CPU 密集计算多线程优化办法？

[James369]

我在写一个 js 前端项目的时候，遇到一个比较耗时的操作 task，它基本结构是一个 2 层的 for 循环计算，task 大体长这样：

function task(x: Int) {
  ... 
  for(var i = 1...10000) {
    for(var j = 1...10000) {
      ...计算数据（与参数 x 相关）
    }
  }
  ...
}

这个 task 在点击按钮时触发，要耗时大概 3 秒左右，为了不阻塞 UI 界面。我想开子线程去优化。那么开子线程能否做到以下几点：

1. 不管用户如何快速的点击按钮，这个 task 子线程始终保持在 1 ～ 2 个（避免开启过多线程）
2. 当用户点击按钮时，如果已有 task 未执行完毕，可以先终止或跳出原 task，再执行新 task 。
3. 假如在开启子线程执行 task 时，需要再传入一个大的 Object （例如 task(x: Int, big: Object)），那么这个 Object 要不要做多线程同步，如何做？

第 3 点如果做不到，那就放弃第 3 点。

[wellsc]

js 有多线程吗

[James369]

@wellsc 所以我来问一下 js 的实现技术栈，其实这 3 点在其它语言中都很好实现，但是不知道 js 怎么做？

[typetraits]

启动 Service Worker，把任务放进 worker 执行，然后发送消息回主线程进行确认

[wellsc]

@James369 js 就不太适合计算密集型，它的适用场景更偏向 io 密集

[James369]

@wellsc 现在就有这方面的需求，并且还不方便放到后端去计算。

[Huelse]

这需求就不适合 js 做，js 也没真多线程，一定要做的话考虑下 WebAssembly 吧

[James369]

@Huelse 我不信，js 都要一统江湖了

[Building]

js 没有多线程，可以试试开一个 iframe 专门帮你做计算。

[zhangxh1023]

前端遇到这种问题，大多数情况下都是用一个 loading 遮罩层，遮盖掉整个页面的。
或者看看能否从需求上砍砍，利用类似于懒加载的方式，按需求计算。

[James369]

@Building 奇怪，前端怎么这么弱 了？ 那上面有 v 友提到的 service worker 或者 web worker 能否实现这个需求呢？

[fengjianxinghun]

试试 webgpu, 如果只是数值计算转到 webgpu 太合适了。

[fengjianxinghun]

webgpu compute shader

[libook]

@wellsc #1 搜一下 Web Workers，Web API 现在有挺多花活，以前很多 JS 干不了的事情现在都能干了，当然不同引擎的具体实现会有差异。

@James369 我没怎么用过 Workers，提供几个点子看看是否可行。
1. 主线程创建 worker 可以把 worker 引用放到一个数组里，然后每次用户点击按钮都检测这个数组有几个元素，销毁 worker 就减少一个元素，创建 worker 就增加一个元素。
2. 主线程每次需要终止一个 worker 的时候就向这个 worker 发送消息，worker 可以监听 message 事件，收到终止消息就改一个局部变量，然后每次循环的时候都检查这个变量，检查到终止信号就退出循环并做善后处理，直至整个 worker 执行完退出。不需要善后处理的话可以直接用 Worker.terminate()强杀。
3. Object 是静态的话可以写死在源代码里，如果是动态的，貌似现成之间只能通过 message 来传递数据。如果你需要多个线程同步数据变化，就是分布式一致性的问题了，这个问题可能也能解决，只不过比较复杂，而且如果经由主线程的交换多了，主线程就会成为瓶颈，反而没必要用多线程了。

你可以去 MDN 上看看 Worker API 的文档，没准能提供些灵感。

另外可以跳出现在的需求，从架构和算法上看看有没有其他优化方法，比如是不是每次都要处理全量数据。

[cheng6563]

就算是 nodejs 做后台服务器也是用多进程解决问题的

[wellsc]

@libook 是可以用，客户端的东西，就是怕用户体验不好🐶

[FrameJack]

GPGPU 了解一下

[lisongeee]

不阻塞 UI 界面，你可以将任务分片，类似 react fiber

[libook]

CPU 密集型也不一定 WebAssembly 就能解决，目前 V8 的很多计算效率已经被优化很好了（乌龟绑火箭，不是说着玩的），有时候上了 Wasm 也没有明显的性能提升，反而加大了开发成本。

具体要看你的计算是不是 JS 所不擅长的，比如通过一些数据结构和内存上的奇淫技巧来大幅优化计算效率，这种用 Wasm 可能会有明显的性能提升。

[crackhopper]

1. 不适合在前端做，为啥不放后端。
2. 不适合用 js 做，在后端了，反正怎么搞都有办法。

[James369]

@fengjianxinghun 应该还用不到 GPU 这么重型的武器吧，并且也不是所有的客户机都有 GPU