専用のWebワーカー(専用のWebワーカー)は、Webコンテンツがバックグラウンドでスクリプトを実行できるようにする簡単な方法を提供します。ワーカーが作成されると、作成者によって指定されたイベント監視機能にメッセージを渡すことができ、ワーカーによって生成されたすべてのタスクがこれらのメッセージを受信します。ワーカースレッドは、干渉UIなしでタスクを実行できます。さらに、xmlhttprequest(responsexmlとチャネルの2つの属性値は常にnullです)を使用して、I/O操作を実行することもできます。この記事では、以前のドキュメントを構成するための例と詳細を提供します。労働者に提供される関数は、ワーカーがサポートする機能をリストします。
ワーカーインターフェイスは、実際のオペレーティングレベルのスレッドを生成します。ただし、Webワーカーの場合、他のスレッドとの通信ポイントは慎重に制御されます。つまり、合併症を引き起こすことは困難です。非スレッドセキュリティコンポーネントまたはDOMにアクセスする方法はありません。したがって、努力を費やさなければ、間違いを犯すことはできません。ワーカーを生成します
新しい労働者を作成するのは非常に簡単です。あなたがしなければならないのは、ワーカー()コンストラクターに電話し、ワーカーの通知を受け取っている場合は、ワーカーの通知を受け取る場合に実行する必要があるURIを指定することです。特定のイベント処理機能。
var myworker = new Worker(my_task.js); nyworker.onmessage = function(oevent){console.log(back by the worker!/n);};または、AddEventListener()を使用することもできます。
var myworker = new Worker(my_task.js);労働者。
この例の最初の行は、新しいワーカースレッドを作成します。 3番目の法律は、メッセージイベントの監視機能を設定します。労働者が独自のpostmessage()関数を呼び出すと、このイベント処理機能が呼び出されます。最後に、ワーカースレッドは7行目に起動されました。注:ワーカーコンストラクターを送信するパラメーターURIは、相同戦略に従う必要があります。現在、さまざまなブラウザメーカーは、どのURIが相同戦略に従うべきかについて依然として異なります(Firefox 10.0 / Thunderbird 10.0 / Seamonkey 2.7)。 Blob Uriは労働者にとって効果的なスクリプトです。
データを渡しますホームページとワーカーの間に送信されるデータは、共有されていません。ワーカーに渡されたオブジェクトはシリアル化する必要があり、次の端をシリアル化する必要があります。ページは、ワーカーと同じ例を共有していません。ほとんどのブラウザは、構造化されたコピーを使用してこの機能を実現します。
下がる前に、教育を目的として、emulatingMessage()と呼ばれる関数を作成しましょう。
関数emulatingMessage(vval){return eval; // objectAlert(embly1); // test#2var example2 = true; alert(typeof embler2); // booleAnalert(typeof emulatingmessage(embles2)); // Boolean // Test#3V#3V AR Example(Hello World); 、年齢:43}; // objectAlert(embly4); var example5 = new Animal(CAT 3);共有されていない値はメッセージと呼ばれます。労働者について話しましょう。PostMessage()を使用してメッセージをメインスレッドに渡すか、メインスレッドから送信できます。メッセージイベントのデータ属性には、ワーカーからのデータが含まれています。
example.html :(ホームページ):var myworker = new Worker(my_task.js); ;
注:一般的に言えば、背景スレッド - ワーカーを含む - domを動作させることはできません。バックグラウンドスレッドがDOMを変更する必要がある場合、これらの操作を完了するために作成者が創設者にメッセージを送信する必要があります。
ご覧のとおり、ワーカーとホームページの間に送信されるメッセージは、元のタイプの価値であっても、常に「JSONメッセージ」です。したがって、JSONデータおよび/またはシリアル化できるデータ型を送信できます。
postmessage({cmd:init、timestamp:date.now()});データを渡す例
例#1:一般的な「非同期eval()」を作成する
次の例では、WorkerでEval()を使用して、あらゆるタイプのJavaScriptコードをあらゆるタイプの非同期コードを実行する方法を紹介します::
// syntax:asynceval(code [、listner])var asynceval =(function(){var alistener = []、oparser = new Worker(data:text/javascript; charset = us-asciii、onmessage%20%3D%20機能機能%20%28oevent%29%20%7b%0a%09postmessage%28%7b%09%09%22id%22%20oevent.data%2c%09%22 valuate%22%3a 3a 3a 3a 3a 3a 3a 3a 3a 3a 3a%%3a% 20VAL%28OEVENT.DATA.CODE%29%0A%09%7D%29%3B%0A%7d); data.id](event.data.evaluated);} delete alisteners [eevent.data.id];}; :alisteners.length -1、code:scode});};});使用例:
//非同期アラートメッセージ...非同期(3 + 2、function(smessage){alert(3 + 2 = + smessage); //非同期印刷...非同期(// hello world !!!/,,, function (shtml){document.body.appendChild(document.createTextNode(shtml);}); .open(/get/、/http://www.mozilla.org//、false);/n/toreq.send(null);/n/treturn oreq.responsetext;/n}););););) ););););););););););)例#2:JSONの高度な方法を転送し、交換システムを作成します
非常に複雑なデータを送信する必要があり、ホームページとワーカーの複数のメソッドを同時に呼び出す必要がある場合は、次のようなシステムの作成を検討できます。
example.html(メインページ): <!doctype html> <html> <gead> <meta charset = utf -8 /> <title> example < /title> <script = text /javascript>メソッド: * sendquery(クエリ機能名、パス1、パス2などの引数など):労働者のクエリ機能 *ポストメッサージ(StringまたはJSONデータ):worker.protodypeを参照してください。機能):リスナーの追加 * removelistener(name):リスナーqueerykerインスタンスプロパティを削除します。 oinstance = oworcer = new Worker(surl)、olistener = {}; .data.hasownproperty(rnb93qh){olisteners [eevent.data.vo42t30] .apply(oievent.data.rnb99 3qh);} {owster.onerror = fonerror;} this.sendquery = function(/ * queryable function name、pass 1への引数1、2、2、2、etc。新しいTyperror(QueryableWorker.sendquery-十分な引数); = function(vmsg){// call()を使用する必要はないと思います(vmsg)。 Prototy Worker.prototype.postmessage.call(oworker、vmsg); ] = flistener;}; removelistener = function(sname){delete olistener [sname];}; ] * /); //カスタムリスナーomytask.addlistener(printsometh、function(nresult){document.getElementbyId(firstLink).parentnode.appendChild(document.createTextNode(display is + nresult +!);};} ); omytask.addlistener(ndeltat、sunit){alertd for + + + :-);}); a id = firstlink href = javascript:omytask.sendquery( 'getdifferente'、5、3);> 5と3の違いは何ですか? omytask.sendquery( 'waitsomething'); inate()ワーカー</a> </li> </ul> </body> </html> my_task.js(worker)://カスタムプライベート機能myprivatefunc1( ){//何か} funct} funct ion myprivatefunc2(){//何か} // 2つのnightrs:getdifference:function(nminund、nsubtrahend){reply(printsomething、nminuend -nsubtrahend);}、//例#2:3秒待つ{setimeout(function(){alererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererererはtsomething、3、sex);}、3000);}}; (/ *リスナー名、パス1への引数、2を渡すなど:arguments [0]、rnb93qh:array.prototype.slice .call(arguments、1)});} onmessage = function(oevent){if(eevent.data instanceof object && sownproperty)&& daeenporty(bk4e1h0) {queryableFunction [eevent.data .bk4e1h0] .apply(self、oevent.data.ktp3fm1);} else {defaultquery(eevent.data);}};これは、ホームページ - 労働者 - または反対の反対側のニュースを切り替えるための非常に適切な方法です。
所有権を転送してデータを転送する(転送可能なオブジェクト)
Google Chrome 17とFirefox 18には、特定のタイプのオブジェクト(転送可能なオブジェクト)をワーカー/バックに渡すためのパフォーマンスが高い別の方法が含まれています。転送オブジェクトは、コピー操作なしに、あるコンテキストから別のコンテキストに転送されます。これは、ビッグデータを渡すと、パフォーマンスが大きく改善されることを意味します。 C/C ++の世界から来た場合は、参照に応じて伝送として想像してください。ただし、リファレンスに応じた搬送とは異なり、オブジェクトが転送されると、元のコンテキストが存在しなくなるバージョン。オブジェクトの所有権は新しいコンテキストに転送されます。たとえば、メインアプリケーションからArrayBufferオブジェクトをワーカーに転送すると、元のArrayBufferがクリアされて使用できません。含まれるコンテンツ(完全)は、ワーカーコンテキストに渡されます。
// 32MBファイルを作成して、var uint8array = new uint8Aray(1024*1024*32); ;サブワーカーを生成します
必要に応じて、労働者はより多くの労働者を生成できます。これは、親ページと同じソースでホストする必要があるサブワーカーと呼ばれます。同様に、Subworkerは、独自のページではなく、自分のページではなくURIのアドレスを分析します。これにより、労働者は依存関係を簡単に監視できます。 Chromeはサブワーカーをサポートしていません。
埋め込まれた労働者現在、ワーカーコードを<script>要素のようなWebページに埋め込むことができる「公式」メソッドはありません。ただし、<script>要素にSRC特性がなく、そのタイプ特性が実行中のMIMEタイプとして指定されていない場合、データブロック要素と見なされ、JavaScriptで使用できます。 「データブロック」は、HTML5の非常に一般的な機能であり、ほぼすべてのタイプのテキストタイプデータを運ぶことができます。したがって、次の方法で労働者を埋め込むことができます。
<!doctype html> <html> <wead> <meta charset = utf-8/> <title> emplemedded worker </title> <script = text/js- worker> //エンジン分析、そのMIMEタイプはテキスト/JSワーカーです。 var myvar = hello world!//残りのワーカーコードはここに書かれています。 </script> <script type = text/javascript> //スクリプトは、MIMEタイプがテキスト/JavaScriptであるため、JSエンジンによって分析されます。 function pagelog(smsg){// fragment:このようにして、ブラウザはレンダリング/リアリングのみを行います。 var ofragm = document.createdocumentfragment(); -Workr> //このスクリプトは、MIMEタイプがテキスト/JSワーカーであるため、JSエンジンによって解析されません。 onmessage = function(oevent){postmessage(myvar);}; </script> <script type = text/javascript> //スクリプトは、MIMEタイプがテキスト/JavaScriptであるため、JSエンジンによって分析されます。 // = =/text // js- workr/]、function(oscript){return oscript.textcontent;})、{type:text/javascript}); 。 document.worker.url.createobjecturl(blob)); (){document.worker.postmessage();};現在、組み込み労働者はカスタマイズされたDocument.Workerプロパティに設定されています。
タイムアウトと間隔ワーカーは、メインスレッドのようなタイムアウトと間隔を使用できます。これは、たとえば、途切れない実行コードなしでワーカースレッドを定期的に使用したい場合に非常に便利です。
終了労働者すぐに労働者を終了したい場合は、労働者のterminate()方法に電話することができます::
myWorker.terminate();
労働者のスレッドはすぐに殺され、独自の操作またはクリーンアップ作業を完了させる機会を残しません。
労働者は、自分のnsiworkerscope.close()メソッドに電話して、自分自身を閉じることもできます。
self.close();プロセスエラー
ワーカーがランタイムエラーの場合、Onerrorイベント処理機能が呼び出されます。 ErroreVentインターフェイス名エラーを実装するイベントを受信します。インシデントは泡立つことはなく、デフォルトのアクションを防ぐためにキャンセルできます。エラーイベントには、次の3つのフィールドがあります。
メッセージ読み取り可能なエラーメッセージ。
ファイル名エラースクリプトファイル名。
リネノエラーが発生したときのスクリプトファイルの行番号。
Navigatorオブジェクトにアクセスしてくださいワーカーは、その範囲でナビゲーターオブジェクトにアクセスできます。ブラウザを認識できる次の文字列が含まれています。
ワーカースレッドは、グローバル関数であるImportScripts()にアクセスできます。これにより、ワーカーはスクリプトまたはライブラリを独自の範囲に導入できます。パラメーターを渡すことなく、または複数のスクリプトのURIにURIを紹介できます。
ImportScripts()は、foo.jsのみを導入します*/
ブラウザはスクリプトをロードして実行します。各スクリプトのグローバルオブジェクトは、ワーカーが使用できます。スクリプトをロードできない場合、Network_Error例外がスローされ、次のコードは実行されません。以前に実行されたコード(window.settimeout()を使用して実行されたコードを含む)は引き続き使用できます。 ImportScripts()後の関数宣言は、他のコードの前に常に実行されているため、まだ使用できます。注:スクリプトのダウンロード順序は固定されていませんが、実行時に注文はimportScripts()()に渡されます。これは同時に完了します。
例このセクションでは、DOMワーカーの使用方法のいくつかの例を示します。
バックグラウンドで操作を実行します
労働者の利点の1つは、UIスレッドをブロックせずにプロセッサの密な操作を実行できることです。次の例では、労働者はフィボナの計算に使用されます。
JavaScriptコード
次のJavaScriptコードは、次のセクションのHTMLファイルに関連付けられている「fibonacci.js」ファイルに保存されます。
var results = []; resultreceiver(event){results.push(event.data)); function errorreceiver(event.data;} onmessage = function(event){parseint(event.data); }(var i = 1; i <= 2; i ++){var Worker(fibonacci.js);ワーカーは、属性を関数に設定します。ワーカーオブジェクトがpostmessage()を呼び出します。 (この使用は、同じ名前のグローバル変数、または同じ名前の関数を定義することと同じではないことに注意してください。VARONMESSAGEと機能Onmessageは、同じグローバル属性を名前と定義しますが、の関数は登録されません。 Webページから送信されたメッセージ。)これにより、再帰が可能になり、新しいコピーが生成され、各サイクルのサイクルを処理します。
HTMLコード
<!doctype html> <html> <gead> <meta charset = utf-8/> <test swetrs fibonacci </title> </head> <body> <div id = result> <scrip = new Worker(fibonacci.js); = function(エラー)( + error.message +/n);
WebページはDiv要素を作成し、IDは結果であり、計算結果を表示し、ワーカーを生成します。ワーカーを生成した後、div要素のコンテンツを設定して計算結果を表示するようにbunmessage処理機能が構成され、Onerror処理関数がストレージエラー情報に設定されます。最後に、それを開始するために労働者にメッセージを送信します。