H5+WebWorkersのマルチスレッド開発と使い方を詳しく解説

今回は、H5+WebWorkers マルチスレッド開発の使用について詳しく説明します。H5+WebWorkers マルチスレッド開発の 注意事項 について、実際の事例を見てみましょう。

ブラウザーが単一のスレッドで js コードを実行することは、ページ ステップが終了するまでは何も応答できないことを誰もが知っています。ここで紹介する WebWorkers はすべてを変更できます。

WebWorkers は、他のスクリプトから独立してバックグラウンドで実行される JS コードであり、ページのパフォーマンスには影響しません。 WebWorkers がバックグラウンドで実行されている間、クリックやコンテンツの選択など、必要な操作を続行できます。

Web ワーカーは、Internet Explorer を除くすべての主要なブラウザーでサポートされています。

ステップ 1: ワーカーを生成します。

Worker()constructorを呼び出し、ワーカースレッドで実行されるスクリプトのURIを指定します。たとえば、現在のページは、ワーカースレッドによって実行されるスクリプトがscript-worker.jsであることを指定します。

var myWorker = new Worker("script-worker.js");

script-worker.js では、追加のコードを実行できますが、これらのコードの実行は、ページが実行したい他の処理に影響を与えることはありません。

ステップ 2: データを渡します。

ページはワーカーと対話してデータを転送できるため、ワーカーはページに影響を与えずにサイレントに計算して意味のある処理を行うことができ、ページにデータを使用するように指示します。

//[主页面代码]
myWorker.postMessage("data-from-mainpage");
//[worker代码]
onmessage = function (oEvent) {
    console.log("主页面发送过来的数据是："+oEvent.data));    
};

上記は [メイン ページがワーカー スクリプトにデータを送信する] 状況です。はい、とてもフレンドリーな postMessage を見ましたね。わかりました、これは気に入っています。

 //[主页面代码]
 myWorker.onmessage = function (oEvent) {
     console.log("worker脚本发送过来的数据是："+oEvent.data)); 
 }; 
//[worker代码]
postMessage("data-from-mainpage");

上記は [ワーカー スクリプトがメイン ページにデータを送信する] 状況です。これはまだ非常に単純ですが、重要なのは、賢く使用することが有益であるということです。

さらに、ワーカーの実行でエラーが発生する可能性があります。メイン ページでは、

myWorker.onerror=function(oEvent){};

を通じてワーカーのエラーを監視できます。

ステップ 3: 重要なポイント。

ワーカー スレッドは、UI に干渉することなくタスクを実行できます。実行された JavaScript コードは完全に別のスコープ内にあり、現在の Web ページのコードとスコープを共有しません。

importScripts() メソッドは Worker のグローバル スコープで提供され、JavaScript ファイルを指す 1 つ以上の URL を受け取ります。読み込みプロセスは非同期で実行されます。

importScripts() は絶対 URI を指定した場合にのみ有効になり、実行プロセスも非同期です。

WebWorkers オブジェクトを作成すると、myWorker.terminate() メソッドを使用して WebWorkers を終了し、ブラウザ/コンピュータのリソースを解放するまで、(外部スクリプトが完了した後でも) メッセージをリッスンし続けます。

ステップ 4: 重要な制限事項。

1. DOM ノード にアクセスできず、グローバル変数やグローバル関数 にアクセスできず、alert() やconfirm などの関数を呼び出すことができず、window や document などのブラウザーのグローバル変数にもアクセスできません。 ;

2. ただし、Web Worker の Javascript では、setTimeout()、setInterval() などの関数を使用したり、Ajax 通信に XMLHttpRequest オブジェクトを使用したりできます。

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

推奨読書:

Webpackのパッケージ化とjsとcssの圧縮手順の詳細な説明

著作権関連のヘッダーと末尾を追加するjqueryフルページプラグイン

以上がH5+WebWorkersのマルチスレッド開発と使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。