WebWorkers - フロントエンド向けのハイパフォーマンス コンピューティング

記事全文を読む前に、WebWorkers とは何か、WebWorkers と Web ハイ パフォーマンス コンピューティングの関係について簡単に説明します。

まず、WebWorkers とは何ですか?

簡単に言えば、WebWorkers は HTML5 の新しい API です。Web 開発者は、この API を使用して、UI をブロックせずにスクリプトをバックグラウンドで実行でき、多くの計算を必要とし、CPU を最大限に活用することができます。マルチコア。

この記事の紹介https://www.html5rocks.com/en/tutorials/workers/basics/、または対応する中国語版を読むことができます。

Web ワーカーの仕様では、Web アプリケーションで バックグラウンド スクリプトを生成するための API を定義しています。Web ワーカーを使用すると、UI などをブロックすることなく、長時間実行されるスクリプトを起動して計算負荷の高いタスクを処理することができます。ユーザー間のアクションを処理するスクリプト

このリンク (https://nerget.com/rayjs-mt/rayjs.html) を開いて、WebWorkers の高速化効果をご自身で体験してください。

基本的にすべてのブラウザが WebWorkers をサポートするようになりました。

Parallel.js

WebWorkers インターフェイスを直接使用するのはまだ面倒です。幸いなことに、これはすでに誰かが Parallel.js をカプセル化しています。

Parallel.js は、node

を通してインストールできることに注意してください:

$ npm installParalleljs

ただし、これは、node のクラスターモジュールを使用して、

node.js の下で使用されます。ブラウザで使用したい場合は、js:

<script src="parallel.js"></script>

を直接適用する必要があります。そうすれば、グローバル変数Parallelを取得できます。 Parallel には、map とreduce という 2 つの関数型プログラミング インターフェイスが用意されており、これにより同時操作が非常に便利になります。

まず問題を定義しましょう。ビジネスは比較的複雑なので、ここでは問題を 1-1,0000,0000 の合計を求め、次に 1-1,0000,0000 を順番に引くように単純化します。答えは明らかです: 0! これは、数値が大きすぎるとデータの精度に問題が生じたり、2 つの方法の結果が多少異なったりして、並列方法が信頼できないと感じられるためです。この問題は、Mac Pro chrome61 で直接 js を実行するだけで約 1.5 秒かかります (実際のビジネス上の問題には 15 秒かかります。ユーザー テスト中にブラウザーが強制終了するのを避けるために、問題を単純化しました)。

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を使用する場合、sumに別の関数fを使用する場合は、事前にrequire(sum)する必要があります。 (f) 、同様に、 g が f で使用される場合、使用されるすべての定義された関数が必要になるまで、 require(g) も必要になります。 。 。 。

変数を要求できません

アピールコードでは、最初にN1を定義しましたが、使用できませんでした

ES6をES5にコンパイルした後に問題が発生し、Chromeはエラーを報告しませんでした

実際のプロジェクト 中学校の初めに、ES6 の機能である配列の分割を使用しました。もともとこれは非常に単純な機能でしたが、現在はほとんどのブラウザーでサポートされています。ただし、そのときに設定した Babel は ES5 にコンパイルされるため、コード _slicedToArray が生成されます。Babel を使用してオンラインでテストすることはできません。 Chrome では動作します。エラー メッセージはありません。長い間確認した後、Firefox で開いたところ、次のエラー メッセージが見つかりました。全能。 。 。

このデモページでテストすることができます。もちろん、速度の向上はコンピューターの CPU のコア数によって異なります。 さらに、後で同じコンピュータで Firefox 55.0.3 (64 ビット) をテストしたところ、アピール コードに実際にかかった時間はわずか 190 ミリ秒でした。 ！ ！ Safari9.1.1でも約190msです。 。

フロントエンドハイパフォーマンスコンピューティングの他の特性と指標についても後ほど紹介しますので、引き続き注目してください。

以上がWebWorkers - フロントエンド向けのハイパフォーマンス コンピューティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。