背景

最近看到一個很有趣的問題：頁面中 Web Worker 數(shù)量是不是越多越好？如果設置 1000個，那豈不是無敵了？

為此我們先準備一段代碼，這段代碼是計算一下從0累計到1億，需要花費多少時間。

圖片

圖片

可以發(fā)現(xiàn)需要耗費很久的時間，總共 43s，并且在這段時間內(nèi)，主線程會被堵塞，后續(xù)的代碼都執(zhí)行不了，所以一般這種耗時的操作可以放在 WebWorker 中去分擔主線程的工作。

使用 WebWorker

剛剛我們直接在主線程中去做累加的操作，是非常費時的，我們試試在 WebWorker 中去做，我們先準備一個 worker.js。

圖片

并且在 index.js 中去引入并創(chuàng)建 WebWorker 實例，我們先來試試一個實例，耗時多少？

圖片

可以發(fā)現(xiàn)時間大大縮短?。?！只需要 4.9s！??！

圖片

那既然這樣的話?。。∈遣皇俏覀兪褂酶嗟?WebWorker 實例去分擔工作，耗時就越短呢？

于是我開始增加 WebWorker 實例的數(shù)量。

圖片

從 1 開始加，發(fā)現(xiàn)總耗時確實越來越低了，但是當實例數(shù)量超過 16 個后，發(fā)現(xiàn)總耗時就沒有下降過了?。?！

圖片

原因其實很簡單，因為線程的并行需要依賴于CPU的核數(shù)。我查看了一下我電腦的核心數(shù)，我的電腦是 16 核的。

圖片

也可以使用 navigator.hardwareConcurrency 這個 API 來看本電腦的核心數(shù)。

圖片

總結

所以總結就是：WebWorker 是越多越好，但是也有上限，上限取決于你 CPU 的 核心數(shù)。

所以你如果想盡量多地使用 WebWorker 來分擔工作，可以將數(shù)量設置為你的電腦的 CPU 核心數(shù)。

圖片