背景

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

為此我們先準(zhǔn)備一段代碼，這段代碼是計(jì)算一下從0累計(jì)到1億，需要花費(fèi)多少時(shí)間。

圖片

圖片

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

使用 WebWorker

剛剛我們直接在主線程中去做累加的操作，是非常費(fèi)時(shí)的，我們?cè)囋囋?WebWorker 中去做，我們先準(zhǔn)備一個(gè) worker.js。

圖片

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

圖片

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

圖片

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

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

圖片

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

圖片

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

圖片

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

圖片

總結(jié)

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

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

圖片