背景

最近看到一個很有趣的問題：頁面中 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 核心數。

圖片