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() などの関数を使用できます。

navigator オブジェクトを使用できます。 Web Storage を使用して、このスレッドのスコープを取得できます。

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 ページで、3f1c4e4b6b16bbbd69b2ee476dc4f83a

タグを使用して外部 JS ファイルをロードします。3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは、JS のクロスドメイン読み込みもサポートしています。

Web Workers には気をつけてください!

ワーカーをインスタンス化するときは、スクリプトの URL を渡す必要があります。この URL はこのドメイン内にある必要があります。そうしないと、クロスドメイン エラーが報告されます。 var worker = new Worker('

https://

localhost/worker.js');

ただし、HTML の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグと同様に、worker.js の importScripts メソッドを使用して、任意のドメインからスクリプトを導入できます。 。以下は合法的な使用方法です:

importScripts(); /* imports nothing */ importScripts(‘foo.js’); /* imports just “foo.js” */ importScripts(‘foo.js’, ‘bar.js’); /* imports two scripts */ importScripts(‘//example.com/hello.js’); /* You can import scripts from other origins */
可以利用这里的importScripts方法解决资源预加载的问题（浏览器预先加载资源，而不会对资源进行解析和执行），道理也很简单。
Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
</script>

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

html5 での DOM プログラミングの実装手順

h5 を使用して WeChat 支払いプロセスを作成する実装手順

H5 を使用して特殊効果のあるドロップダウン ボックスを作成する

以上がH5 マルチスレッドで Web Worker を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。