WebWorkers-前端的高效能運算

在閱讀全文之前先給大家簡單的介紹一下，什麼是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也不是萬能的啊。 。 。

大家可以在此Demo頁面測試， 提速大概在4倍左右，當然還是得看自己電腦CPU的核數。 另外我後來在同樣的電腦上Firefox55.0.3（64位）測試，上訴代碼居然只要190ms！ ！ ！在Safari9.1.1下也是190ms左右。 。

之後也會介紹給大家關於前端的高效能運算其他的屬性和指標，請大家持續關注。

#########

以上是WebWorkers-前端的高效能運算的詳細內容。更多資訊請關注PHP中文網其他相關文章！