背景
最近看到一个很有趣的问题:页面中 Web Worker 数量是不是越多越好?如果设置 1000个,那岂不是无敌了?
为此我们先准备一段代码,这段代码是计算一下从0累计到1亿,需要花费多少时间。
图片
图片
可以发现需要耗费很久的时间,总共 43s,并且在这段时间内,主线程会被堵塞,后续的代码都执行不了,所以一般这种耗时的操作可以放在 WebWorker 中去分担主线程的工作。
使用 WebWorker
刚刚我们直接在主线程中去做累加的操作,是非常费时的,我们试试在 WebWorker 中去做,我们先准备一个 worker.js。
图片
并且在 index.js 中去引入并创建 WebWorker 实例,我们先来试试一个实例,耗时多少?
图片
可以发现时间大大缩短!!!只需要 4.9s!!!
图片
那既然这样的话!!!是不是我们使用更多的 WebWorker 实例去分担工作,耗时就越短呢?
于是我开始增加 WebWorker 实例的数量。
图片
从 1 开始加,发现总耗时确实越来越低了,但是当实例数量超过 16 个后,发现总耗时就没有下降过了!!!
图片
原因其实很简单,因为线程的并行需要依赖于CPU的核数。我查看了一下我电脑的核心数,我的电脑是 16 核的。
图片
也可以使用 navigator.hardwareConcurrency 这个 API 来看本电脑的核心数。
图片
总结
所以总结就是:WebWorker 是越多越好,但是也有上限,上限取决于你 CPU 的 核心数。
所以你如果想尽量多地使用 WebWorker 来分担工作,可以将数量设置为你的电脑的 CPU 核心数。