开 1000 个 Web Worker!我的页面能起飞吗?

2024年 5月 29日 66.5k 0

背景

最近看到一个很有趣的问题:页面中 Web Worker 数量是不是越多越好?如果设置 1000个,那岂不是无敌了?

为此我们先准备一段代码,这段代码是计算一下从0累计到1亿,需要花费多少时间。

开 1000 个 Web Worker!我的页面能起飞吗?-1图片

开 1000 个 Web Worker!我的页面能起飞吗?-2图片

可以发现需要耗费很久的时间,总共 43s,并且在这段时间内,主线程会被堵塞,后续的代码都执行不了,所以一般这种耗时的操作可以放在 WebWorker 中去分担主线程的工作。

使用 WebWorker

刚刚我们直接在主线程中去做累加的操作,是非常费时的,我们试试在 WebWorker 中去做,我们先准备一个 worker.js。

开 1000 个 Web Worker!我的页面能起飞吗?-3图片

并且在 index.js 中去引入并创建 WebWorker 实例,我们先来试试一个实例,耗时多少?

开 1000 个 Web Worker!我的页面能起飞吗?-4图片

可以发现时间大大缩短!!!只需要 4.9s!!!

开 1000 个 Web Worker!我的页面能起飞吗?-5图片

那既然这样的话!!!是不是我们使用更多的 WebWorker 实例去分担工作,耗时就越短呢?

于是我开始增加 WebWorker 实例的数量。

开 1000 个 Web Worker!我的页面能起飞吗?-6图片

从 1 开始加,发现总耗时确实越来越低了,但是当实例数量超过 16 个后,发现总耗时就没有下降过了!!!

开 1000 个 Web Worker!我的页面能起飞吗?-7图片

原因其实很简单,因为线程的并行需要依赖于CPU的核数。我查看了一下我电脑的核心数,我的电脑是 16 核的。

开 1000 个 Web Worker!我的页面能起飞吗?-8图片

也可以使用 navigator.hardwareConcurrency 这个 API 来看本电脑的核心数。

开 1000 个 Web Worker!我的页面能起飞吗?-9图片

总结

所以总结就是:WebWorker 是越多越好,但是也有上限,上限取决于你 CPU 的 核心数。

所以你如果想尽量多地使用 WebWorker 来分担工作,可以将数量设置为你的电脑的 CPU 核心数。

开 1000 个 Web Worker!我的页面能起飞吗?-10

图片

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论