在閱讀全文之前先給大家簡單的介紹一下，什麼是WebWorkers，WebWorkers與web高效能運算又有哪些關係。
首先什麼是WebWorkers？
簡單說，WebWorkers是一個HTML5的新API，web開發者可以透過此API在後台運行一個腳本而不阻塞UI，可以用來做需要大量計算的事情，充分利用CPU多核心。
大家可以看看這篇文章介紹https://www.html5rocks.com/en/tutorials/workers/basics/， 或是對應的中文版。
The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.
#可以開啟這個連結（https //nerget.com/rayjs-mt/rayjs.html）自己體驗WebWorkers的加速效果。
現在瀏覽器基本上都支援WebWorkers了。
Parallel.js
#直接使用WebWorkers介面還是太繁瑣，好在有人已經對此作了封裝：Parallel.js。
注意Parallel.js可以透過node安裝：
$ npm install paralleljs
不過這個是在node.js下用的，用的node的cluster模組。如果要在瀏覽器裡使用的話， 需要直接套用js:
<script src="parallel.js"></script>
#然後可以得到一個全域變量，Parallel。 Parallel提供了map和reduce兩個函數式程式設計的接口，可以非常方便的進行並發操作。
我們先來定義一下我們的問題，由於業務比較複雜，我這裡把問題簡化成求1-1,0000,0000的和，然後在依次減去1-1,0000,0000，答案顯而易見： 0！ 這樣做是因為數字太大的話會有數據精確度的問題，兩種方法的結果會有一些差異，會讓人覺得並行的方法不可靠。此問題在我的mac pro chrome61下直接簡單地跑js運行的話大概是1.5s（我們實際業務問題需要15s，這裡為了避免用戶測試的時候把瀏覽器搞死，我們簡化了問題）。
const N = 100000000;// 总次数1亿
function sum(start, end) {
let total = 0;
for (let i = start; i<=end; i += 1) total += i;
for (let i = start; i<=end; i += 1) total -= i;
return total;
}
function paraSum(N) {
const N1 = N / 10;//我们分成10分，没分分别交给一个web worker，parallel.js会根据电脑的CPU核数建立适量的workers
let p = new Parallel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
.require(sum);
return p.map(n => sum((n - 1) * 10000000 + 1, n * 10000000))// 在parallel.js里面没法直接应用外部变量N1
.reduce(data => {
const acc = data[0];
const e = data[1];
return acc + e;
});
}程式碼比較簡單，我在這裡說幾個剛用的時候遇到的坑。
require所有需要的函數
#例如在上訴程式碼中用到了sum，你需要提前require(sum )，如果sum中由用到了另一個函數f，你還需要require(f)，同樣如果f中用到了g，則還需要require(g)，直到你require了所有用到的定義的函數。 。 。 。
沒辦法require變數
#我們上訴程式碼我本來定義了N1，但沒法用
ES6編譯成ES5之後的問題以及Chrome沒報錯
實際專案中一開始我們用到了ES6的特性：數組解構。本來這是很簡單的特性，現在大部分瀏覽器都已經支援了，不過我當時配置的babel會編譯成ES5，所以會產生程式碼_slicedToArray，大家可以在線上Babel測試，然後Chrome下面始終不work，也沒有任何報錯訊息，查了很久，後來在Firefox下打開，有報錯訊息：
ReferenceError: _slicedToArray is not defined
看來Chrome也不是萬能的啊。 。 。
之後也會介紹給大家關於前端的高效能運算其他的屬性和指標，請大家持續關注。
以上是WebWorkers-前端的高效能運算的詳細內容。更多資訊請關注PHP中文網其他相關文章！
