HTML5新機能マルチスレッド

JavaScriptは、1つのことをして、次のことをすることができることに疑いの余地がありません。ユーザーの操作。おかげで、HTML5はマルチスレッドメカニズムを提供します。

（1）関数の構築新しいワーカー（arg）：パラメーターは、「myWorker.js」など、実行するコードが実行するJSファイルを表し、コンストラクターはもちろんワーカークラスのインスタンスを返しています

（2）worker.postmessage（メッセージ）：この方法は、メインスレッドからサブスレッドまたはサブスレッドにメッセージを送信することを示しています。

（3）労働者に関するメッセージもあります。

WokerクラスのAPIは非常に簡潔であることがわかります。

 //main.html <!!!! </head> <div id = out> </div> <input type = text name = id = txt> <button id = btn> send </button> <script type = text/javascript> var out = document.getElementById （out）; Script> </html> // swreet1.jsonmessage tion（event）{var res = event.data+handome！ ;

テキストボックスを入力すると大〜送信ボタンをクリックすると、次の効果があります

簡単な分析と、Trip1.jsでメインスレッドでワーカーインスタンスワーカーを作成しました.jsそれはどうですか？はい、彼はメッセージインシデントを聞きました。メインスレッドはイベントをトリガーし、コールバック関数を実行し、コールバック関数がイベントオブジェクトから送信された値を取得し、この値をハンサムに追加しました。 、それを送り返します。メインスレッドはワーカーのメッセージイベントも聞いていたため、メッセージは過去にトリガーされ、メッセージコンテンツがDivに表示されるため、上記の効果が見られます。

多分あなたはこれを使用しますか？ここでは本当に役に立ちます。操作、彼の複雑さはO（1）（ハハ、彼は最近アルゴリズムを研究している！）であるからですが、それがそのような単純な操作ではなかったなら？この方法の利点は、サブスレッドがどの程度複雑であるか、メインスレッドが変更されるのはなぜですか？

教師は、新しいワーカー（）を呼び出します公式文書を確認して、関連する説明がないことを発見しました。

メインスレッドで複数のサブスレッドを呼び出す例を見てみましょう。

 //main.html <!!!! </head> <div id = out> </div> <input type = text name = id = txt> <button id = btn> send </button> <script type = text/javascript> var out = document.getElementById （out）; document.getElementbyid（btn）; .postmessage（postdata）;}、false）; out.innertext = e.data;}、false）; ;ポストメス（res）;} // thread2.jsonmessage = function（event）{var res = event.data+ ;

メインスレッドは、1つのタスクを完了するために2つのスレッドが必要です。これは、最初にWorker1から要求され、次にWorker2を要求し、同時にworker1を処理してから取得し、次に取得します。最終的な結果とともに、ページに表示されます。

他のJSファイルは、下側の例など、サブスレッドで導入してから呼び出されます。

 //main.html <!!!! </head> <div id = out> </div> <input type = text name = id = txt> <button id = btn> send </button> <script type = text/javascript> var out = document.getElementById （out）; var btn.getelementbyid（btn）; ）;}、false）; res = handler（event.data）;} // tools.function（data）{return data+come on！ }

Thread1.jsにはtools.jsというファイルがないが、importscripts（）を介してJSファイルをインポートし、露出方法を呼び出すことができることがわかります。

共有ワーカーの本質は、異なるスレッドを共有することができ、そのデータも共有されます。

議論する直接的な例。

 //main.html <!!!!! SharedWorker（ 'shared.js'）;データ;} </script> </body> </html> // shared.jsonconnect = function {var port = e.ports [0];

これは、最初に2番目の方法を見て、次に分析を行います。

 <！ 'shared.js'）; var log.getElementbyid（ 'log'）; 、false）; e.ports.port.onmessage（e）{postmessage（ 'pong'）; e.target.postmessage（ 'pong'）;

最初の方法は、イベントハンドルを使用してメッセージを聴くことです。彼らは労働者とは異なります。

では、SharedWorkerはどのようにデータを共有しますか？次の例をご覧ください。

 // main1とmain2は<！ = ID = ID = TXT> <ボタンID = Get </button> <ボタンID = setTon> <script> var Worker = new Shared Worker（ 'shared.js'）; （get '）; ）{log.innertext = e.data;}、false）; value）、false）; ）{var port = e.ports [0]; }}

ここでの分析では、main1.htmlのテキストボックスにデータを入力し、[設定]をクリックしてから、main2.htmlのGetメソッドをクリックして、Javaの静的クラスと同じようにMain1.html単一のケースで設定したデータを取得します。いくつのニュースが関係していても、実際には1つしかありません。そのため、さまざまなスレッドが共有ワーカーのデータを共有できます。これが写真です。

最後に、要約しましょう。労働者と共有ワーカーには吊り下げられていません。つまり、ステージの前で作業を舞台の前で舞台裏で行うために作業を動かして、ステージの前で作業を中断します。それはステージで10分間、ステージから10年を離れた場合、観客の唾液の星はすでにあなたをownれているので、それらの面倒な仕事はまだ下に置くと、あなたの最高の側面の最高の面だけがステージにあり、10分で十分です！