Raid on HTML5 Javascript API Extension 1—Web Worker の非同期実行と関連する概要_html5 チュートリアルのスキル

JavaScript 実行メカニズム
HTML5 より前は、ブラウザでの JavaScript の実行はシングルスレッド方式で機能していましたが、マルチスレッドをシミュレートする方法は数多くあります (例: Javascript の setinterval メソッド、setTimeout メソッド) 、など)、しかし本質的には、プログラムの実行は依然として JavaScript エンジンによってシングルスレッド スケジューリング方式で実行されます。 HTML5 で導入されたワーカー スレッドにより、ブラウザ側の Javascript エンジンが Javascript コードを同時に実行できるようになり、ブラウザ側のマルチスレッド プログラミングの適切なサポートが実現します。

JavaScript の複数のスレッド - WebWorker
HTML5 の Web Worker は、2 つの異なるスレッド タイプに分けることができます。1 つは専用スレッド D dedicated Worker、もう 1 つは共有スレッド Sharedワーカー。どちらのタイプのスレッドも異なる目的を果たします。
専用 Web ワーカー
専用ワーカーは、それを作成したスクリプトに接続されますが、他のワーカーまたはブラウザ コンポーネントと通信できますが、DOM とは通信できません。専用の意味は、このスレッドが一度に 1 つの要件のみを処理することだと思います。 IEを除く各種主流ブラウザには専用スレッドが実装されており、安心してご利用いただけます。
スレッドの作成
ワーカーの作成は、スレッド内で実行する必要がある JavaScript ファイルのファイル名をコンストラクターに渡すだけです。
スレッド通信
メインスレッドとサブスレッド間の通信には、スレッドオブジェクトの postMessage メソッドと onmessage メソッドが使用されます。誰が誰にデータを送信するかに関係なく、送信者は postMessage メソッドを使用し、受信者は onmessage メソッドを使用してデータを受信します。 postMessage には転送データという 1 つのパラメータしかありません。また、onmessage にも 1 つのパラメータしかありません。イベントの場合、受信データは、event.data を通じて取得されます。
JSON データを送信する
JSON は JS でネイティブにサポートされているものです。複雑なデータを送信するために無駄に JSON を使用する必要はありません。例:

コードをコピー

コードは次のとおりです。

postMessage({ 'cmd': 'init', 'timestamp': Date.now()});

エラーの処理
スレッドでエラーが発生すると、その onerrorイベントコールバックが呼び出されます。したがって、エラーを処理する方法は非常に簡単で、スレッド インスタンスの onerror イベントをフックすることです。このコールバック関数にはパラメータ error があり、次の 3 つのフィールドがあります: message - エラー メッセージ; lineno - エラーが発生した行。
スレッドを破棄します
スレッド内で、close メソッドを使用してスレッド自体を破棄します。スレッド外のメインスレッドでは、スレッドインスタンスのterminateメソッドを使用してスレッドを破棄します。
例からスレッドの基本的な操作を見てみましょう:
HTML コード:

コードをコピー

コードは次のとおりです。

fibonacci.js コード:





コードをコピー

コードは次のとおりです:

/ /fibonacci.js var fibonacci = function(n) { return n onmessage = function(event) { var n = parseInt(event.data, 10); postMessage(fibonacci(n));

同じディレクトリに移動してファイル ページを実行し、コンソールを確認すると、操作の結果が表示されます。
ここでもう 1 つ、メイン スレッドで onmessage イベントを別の方法でフックできるということです:





コードをコピー

コードは次のとおりです:


worker.addEventListener('message', function(event) {
console.log("Result:"event.data);

}、 false );

個人的には非常に面倒なのでonmessageを直接使った方が良いと思います。
他のスクリプト ファイルの使用
ワーカー スレッドは、グローバル メソッド importScripts を使用して、他のドメイン内スクリプト ファイルまたはクラス ライブラリをロードして使用できます。たとえば、次のような使用法は合法です:

コードをコピーします

コードは次のとおりです:

importScripts();/* 何もインポートしません */
importScripts('foo.js'); /* "foo.js" だけをインポートします */
importScripts('foo.js', 'bar .js') ;/* 2 つのスクリプトをインポートします */

インポート後、これらのファイル内のメソッドを直接使用できます。オンラインで小さな例を見てください:

コードをコピーします

コードは次のとおりです:

/* *
* importScripts メソッドを使用して外部リソース スクリプトを導入します。ここでは数式計算ツール ライブラリ math_utilities.js を使用します。
* JavaScript エンジンがこのリソース ファイルの読み込みを完了したら、次のコードを実行し続けます。同時に、次のコードは、リソース ファイルで定義されている
* 変数とメソッドにアクセスして呼び出すことができます。
**/
importScripts('math_utilities.js');
onmessage = function (event)
{
var first =event.data.first; var Second = events .data.second;
calculate(first,second);
function Calculate(first,second) {
// 計算作業を実行します
var common_divisor= divisor(first, Second);
var common_multiple=multiple(first,second);
postMessage("仕事は終わりました! "
"最小公倍数は " common_divisor
" であり、最大公約数ですis " common_multiple) ;
}


インターネット上の一部のネチズンは、ここで importScripts メソッドを使用して、リソースのプリロードの問題を解決することを考えました (ブラウザは解析や実行を行わずにリソースを事前にロードします)理由も非常に単純です。

スレッドのネスト
ワーカー スレッド内にサブスレッドを作成することもでき、さまざまな操作は変わりません。
同期の問題
ワーカーにはロック メカニズムがなく、マルチスレッドの同期の問題はコード (信号変数の定義など) によってのみ解決できます。
共有 SharedWebWorker
共有 Web ワーカーは、主に複数接続の同時実行の問題に適しています。複数の接続を処理する必要があるため、その API は専用ワーカーの API とは少し異なります。これとは別に、共有 Web ワーカーは専用ワーカーと同様に DOM にアクセスできず、フォーム プロパティへのアクセスも制限されています。共有 Web ワーカーはネットワーク経由で通信することもできません。
ページ スクリプトは共有 Web ワーカーと通信できますが、専用 Web ワーカー (暗黙的なポートを使用して通信する) とは少し異なり、通信はポート オブジェクトを使用して明示的に行われ、これはメッセージ イベント ハンドラーをアタッチすることによって行われます。 。 Web ワーカー スクリプトから最初のメッセージを受信した後、共有 Web ワーカーはアクティブ化されたポートにイベント ハンドラーをアタッチします。通常、ハンドラーは独自の postMessage() メソッドを実行して呼び出しコードにメッセージを返し、その後ポートの start() メソッドが有効なメッセージ プロセスを生成します。
インターネットで見つけることができる唯一の例を見てください。異なる接続から送信された命令を受信するための共有スレッドを作成し、独自の命令処理ロジックを実装します。命令の処理が完了すると、結果がそれぞれの接続に返されます。接続ユーザー。
HTML コード:

コードをコピー コードは次のとおりです:

var worker = new SharedWorker('sharedworker.js');
var log = document.getElementById('response_from_worker');
worker.port.addEventListener('message', function(e) {
//応答データを Web ページに記録します
log.textContent =e.data;
}, false);
worker.port.start();
worker.port.postMessage('ユーザー Web ページからの ping..');
//次のメソッドはユーザー入力を共有ワーカーに送信します
function postMessageToSharedWorker(input)
{
// リクエストを構築するための json オブジェクトを定義します
var命令={instruction:input.value };
worker.port.postMessage(命令);
}

共有ワーカーの例: HTML5 で共有ワーカーを使用する方法

共有ワーカーに指示を送信します:

脚本文件代：

复制代

代码如下:

// 異なる接続から送信された命令を受信するための共有プロセスを構築し、命令処理が完了した後に結果をそれぞれの異なる接続ユーザに返す。
onconnect = function(e) {
connect_number =connect_number 1;
//ここで最初のポートを取得します
var port = e.ports[0];
port.postMessage('新しい接続です! 現在の接続番号は '
connect_number);
port.onmessage = function(e) {
//リクエスターから指示を取得します
var命令=e.data.instruction;
var results=execute_instruction(命令);
port.postMessage('Request: ' 命令 ' 応答 ' 結果
' 共有ワーカーから...');
};
};
/*
* この関数は、リクエスターから送信された命令を実行するために使用されます
* @param 命令
* @return
*/
functionexecute_instruction(instruction)
{
var result_value;
// ここにロジックを実装します
// 命令を実行します...
return result_value；
}


上記の共有スレッドの例では、メイン ページ、つまり各ユーザー接続ページで共有スレッド オブジェクトが構築され、共有スレッドにユーザー指示を送信するメソッド postMessageToSharedWorker が定義されています。同時に、この共有スレッドへの接続の合計数を記録するために、共有スレッド実装コード スニペットで connect_number が定義されます。その後、onconnect イベント ハンドラーを使用して、さまざまなユーザーからの接続を受け入れ、ユーザーから渡された命令を解析します。最後に、ユーザーの命令を実行するメソッドexecute_instructionが定義されています。命令が実行された後、結果が各ユーザーに返されます。

ここでは、前の例のようにワーカー スレッドの onmessage イベント ハンドラーを使用せず、別のメソッド addEventListener を使用します。実際、前述したように、この 2 つの実装原則は基本的に同じですが、共有スレッドからのメッセージを受け入れるために addEventListener を使用する場合は、worker.port.start() メソッドを使用する必要があります。まずこのポートを有効にします。その後はワーカースレッドと同様に通常通りメッセージの送受信ができるようになります。
最後のステートメント
スレッドで実行できること:
1. setTimeout()、clearTimeout()、setInterval()、clearInterval を使用できます。 () などの関数です。
2. ナビゲーターオブジェクトを使用できます。
3. XMLHttpRequest を使用してリクエストを送信できます。
4. Web ストレージはスレッド内で使用できます。
5. スレッド内で self を使用して、このスレッドのスコープを取得できます。
スレッドでできないこと:
1. ナビゲーター以外の DOM/BOM オブジェクト (ウィンドウやドキュメントなど) はスレッドで使用できません (操作したい場合は、メッセージをワーカー作成者に送信し、コールバック関数を介して操作されます)。
2. メインスレッド内の変数や関数はスレッド内で使用できません。
3. アラート等の「停止」効果のある操作コマンドはスレッド内で使用できません。
4. スレッド内のドメインをまたいで JS をロードすることはできません。
スレッドもリソースを消費し、スレッドを使用するとある程度の複雑さが生じるため、追加のスレッドを使用する正当な理由がない場合は使用しないでください。
実用的なリファレンス
公式ドキュメント: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
WebWorker 分類の説明: http://www.w3schools.com/html5/html5_webworkers.asp
スクリプト ハウス: http://www.jb51.net/w3school/html5/
WebWorker の概要: https://developer.mozilla.org/en/Using_web_workers