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

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

背景

最近看到一个很有趣的问题:页面中 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 核心数。

图片 图片

责任编辑:武晓燕 来源: 前端之神
相关推荐

2023-08-15 14:00:20

Web云开发Rust

2021-08-28 10:06:29

VueJavascript应用

2024-08-08 08:50:21

标签页portTab

2015-03-23 10:26:10

2023-10-20 07:29:16

框架模型Prompt

2021-04-09 08:51:32

Web WorkerJavaScript微前端

2023-07-31 11:16:45

Web前端worker服务

2010-07-22 19:20:13

云计算

2022-08-03 14:51:18

pandasPython

2024-11-05 14:40:00

智能体AI

2023-11-10 08:18:27

JavaGraalVM

2014-11-14 14:03:17

微软安全漏洞bug

2018-06-05 09:13:47

2023-12-28 08:01:59

2019-08-02 17:48:16

戴尔

2009-11-05 12:04:48

2022-01-05 16:16:02

查询编程工程师

2021-02-22 11:12:24

ExcelPython数据

2023-12-28 10:01:05

ChatGPT技巧信息

2024-06-05 08:33:42

点赞
收藏

51CTO技术栈公众号