H5 マルチスレッドで Web Worker を実装する方法

多くの人から、H5 マルチスレッドで Web Worker を実装するにはどうすればよいかという質問を受けました。この質問について話すときは、まず Web ワーカーとは何かを知る必要があります。そこで、今日はこの質問に答えます。

JavaScript コードが Web ワーカーに渡されてバックグラウンドで実行される場合、ページがスタックするのを防ぐために、JavaScript の実行中もページはユーザーの操作に応答できます。ユーザーは複数のワーカー スレッドを作成して、小規模な分散コンピューティングやその他の作業をフォアグラウンドで実行できるようにします。

分散コンピューティングは、集中型コンピューティングとは反対のコンピューティング手法です。コンピューティング基盤の発展に伴い、一部のアプリケーションは、集中型コンピューティングを使用すると、完成するまでに非常に大きなコンピューティング能力を必要とします。分散コンピューティングでは、アプリケーションを多くの小さな部分に分割し、それらを複数のコンピューターに割り当てて処理します。これにより、全体的な計算時間が節約され、計算効率が大幅に向上します。

上で述べた小規模分散コンピューティングは、CPU マルチコアの効率的な使用です。

スレッドで実行できないこと:

Web Worker は DOM ノードにアクセスできません DOM を共有できないのは通常のことです。そうでない場合、DOM はここで操作されており、Worker も DOM を操作しているか、DOM を削除していることさえありますこれはすでに競合ではありませんか？ Web ワーカーは、グローバル変数またはグローバル関数にアクセスできません。 Web ワーカーは、alert() などの関数を呼び出すことや、ドキュメント などのブラウザーのグローバル変数にアクセスできません。 スレッドで実行できること:

可能setTimeout()、clearTimeout()、setInterval()、clearInterval() などの関数を使用できます。

Web Worker 専用スレッド(専用Webワーカー)と共有スレッド(共有Webワーカー)の2種類に分けられます。専用スレッドは、それを作成したページのみがアクセスでき、現在のページが閉じられると終了します。共有スレッドは、複数のページがアクセスでき、関連するすべてのページが閉じられるとのみ終了します。専用スレッドと比較すると、共有スレッドは少し複雑です。 Web Worker のブラウザーサポートを検出します

if(typeof(Worker)!=="undefined")  {  
    // Yes! Web worker support!  
}  else  {  
    // Sorry! No Web Worker support..  
}

Web Worker オブジェクトとファイルを作成します:

以下はおそらく最も単純なエントリーレベルの JS マルチスレッドデモです:

ここに画像の説明を書きます

スレッドを作成します

var worker = new Worker(url);//url は、スレッド内で実行する必要がある JavaScript ファイルの名前と、対応するパスです

スレッド通信

メインスレッドとサブスレッド間で通信するには、postMessage thread オブジェクトの onmessage メソッドが使用されます。誰が誰にデータを送信するかに関係なく、送信者は postMessage メソッドを使用し、受信者は onmessage メソッドを使用してデータを受信します。 postMessage と onmessage の両方のパラメーターは 1 つだけです。onmessage のパラメーターがevent であるとすると、受信データはevent.data を通じて取得されます。

スレッドを破棄する

スレッドの外部では、スレッドインスタンスのterminateメソッドを使用してスレッドを破棄します。スレッドの内部では、closeメソッドを使用して、スレッド自体を破棄します

エラーの処理

スレッドでエラーが発生した場合。の場合、その onerror イベント コールバックは transfer になります。

var worker = new Worker("test.js");
worker.onerror = function(event){
    console.log("load web worker error." + event);
}

JSON データを送信

複雑なデータを JSON で送信してください!

Web Worker で importScripts を使用して外部 JS をロードします

HTML ページで、