Web ワーカーは、HTML5 によって提供される JavaScript マルチスレッド ソリューションです。計算負荷の高いコードを Web ワーカーに渡して、ユーザー インターフェイスをフリーズさせることなく実行できます。
1:ワーカーの使い方Web Worker の基本原理は、Worker クラスを使用して JavaScript の現在のメイン スレッドに JavaScript ファイルをロードし、新しいスレッドを開くことです。これにより、ノンブロッキング実行の効果があり、メイン スレッド間のデータ交換用のインターフェイスが提供されます。そして新しいスレッド: postMessage、onmessage。
では、それをどのように使用するか、例を見てみましょう。
//worker.jsonmessage =function (evt){ var d = evt.data;//evt.data で送信データを取得 postMessage(d);//取得したデータをメインスレッドに送信}HTML ページ: test.html
<!DOCTYPE HTML><html><head> <meta http-equiv=Content-Type content=text/html; charset=utf-8/> <script type=text/javascript>//WEB ページのメインスレッド var worker = new Worker(worker.js); // Worker オブジェクトを作成し、新しいスレッドで実行されるスクリプトの URL を渡します。 worker.postMessage(hello world); // データをワーカーに送信します。 =function(evt){ //ワーカーからデータ関数 console.log(evt.data) を受信 //ワーカーから送信されたデータを出力} </script> </head> <body></body>< /html>Chrome ブラウザで test.html を開くと、コンソールに hello world が出力され、プログラムが正常に実行されたことが示されます。
この例から、Web ワーカーの使用が主に次の部分に分かれていることがわかります。
WEBメインスレッド:
1.worker = new Worker( url ) を通じて JS ファイルをロードしてワーカーを作成し、ワーカー インスタンスを返します。
2. worker.postMessage(data) メソッドを通じてワーカーにデータを送信します。
3. worker.onmessage メソッドをバインドして、ワーカーによって送信されたデータを受信します。
4. worker.terminate() を使用してワーカーの実行を終了できます。
新しいワーカー スレッド:
1. postMessage(data) メソッドを通じてメインスレッドにデータを送信します。
2. onmessage メソッドをバインドして、メインスレッドによって送信されたデータを受信します。
2: ワーカーは何ができるの?Web Worker の使用方法がわかったので、Web Worker の用途と、Web Worker がどのような問題の解決に役立つかを理解しました。フィボナッチ数列の例を見てみましょう。
ご存知のとおり、数学ではフィボナッチ数列は再帰的に定義されます: F0=0、F1=1、Fn=F(n-1)+F(n-2) (n>=2、n∈N*)、 JavaScript の一般的な実装は次のとおりです。
var fibonacci =function(n) { return n <2? n : argument.callee(n -1) + argument.callee(n -2);};//fibonacci(36)Chrome でこのメソッドを使用してフィボナッチ数列 39 を計算する実行時間は 19097 ミリ秒ですが、40 を計算すると、ブラウザーはスクリプトがビジーであることを直接通知します。
JavaScript は単一スレッドで実行されるため、ブラウザーはシーケンスの計算プロセス中に他の JavaScript スクリプトを実行できず、UI レンダリング スレッドも一時停止されるため、ブラウザーはゾンビ状態になります。 Web ワーカーを使用してシーケンスの計算プロセスを新しいスレッドに配置すると、この状況を回避できます。具体的な例を参照してください。
//fibonacci.jsvar fibonacci =function(n) { return n <2? n : argument.callee(n -1) + argument.callee(n -2);};onmessage =function(event) { var n = parseInt (event.data, 10); postMessage(fibonacci(n));};HTML ページ: fibonacci.html
<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8/><title>Web ワーカー フィボナッチ</title><script type=text/javascript; > onload =function(){ var worker =new Worker('fibonacci.js'); worker.addEventListener('message', function(event) { var timer2 = (new Date()).valueOf(); console.log( '結果:'+event.data, '時刻:'+ timer2, '所要時間:'+ ( timer2 - timer ) }, var timer = ( new Date()).valueOf(); console.log('計算開始: 40', '時刻:' + timer ); console.log('シーケンスの計算時にタイマー関数が実行されました', 'Time:'+ (new Date()).valueOf() },1000);シーケンスを計算するときに ', 'time:'+ (new Date()).valueOf() ) } </script></head><body></body></html> を実行しました。Chrome で fibonacci.html を開くと、コンソールに次の出力が表示されます。
カウント開始: 40 時間: 1316508212705
シーケンスを計算したとき、実行時間は 1316508212734 でした。
シーケンスの計算時に実行されるタイマー関数: 1316508213735
結果: 102334155 時間: 1316508262820 経過時間: 50115
この例は、ワーカーで実行されるフィボナッチ数列の計算がメイン スレッドのコード実行に影響を与えず、それ自体の独立したスレッドで完全に計算され、計算が完了した後にのみ結果がメイン スレッドに返されることを示しています。完成しました。
Web ワーカーを使用すると、ページの表示に影響を与えることなく、フロントエンドで複雑で大規模な操作を実行でき、不快なスクリプトビジープロンプトがポップアップ表示されなくなります。
次の例では、Web ワーカーを使用してシーン内のピクセルを計算します。シーンが開かれると、ワーカーは 1 つのピクセル値のみを計算します。
3: ワーカーによるその他の試みWorker が URL を受け取ってワーカーを作成することはすでにわかっていますが、Web ワーカーを使用して jsonp と同様のリクエストを行うことはできますか? ご存知のとおり、jsonp は script タグを挿入することで json データをロードし、script 要素がロードして実行します。プロセスはすべてブロックされています。Web ワーカーを使用して非同期読み込みを実装できれば素晴らしいでしょう。
次の例では、Web ワーカー、jsonp、ajax の 3 つの異なる方法を通じて 169.42KB の JSON データを読み込みます。
// /aj/webWorker/core.jsfunction $E(id) { return document.getElementById(id);}onload =function() { //Web ワーカーによるロード $E('workerLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face2'; var d = (new Date()).valueOf(); Worker(url); worker.onmessage =function(obj) { console.log('web ワーカー: '+ ((new Date()).valueOf() - d)) }; E('jsonpLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face1'; Date()).valueOf(); STK.core.io.scriptLoader({ メソッド:'post', url : url, onComplete : function() { console.log('jsonp: '+ ((new Date()) .valueOf() - d)); } }); // ajax.onclick =function() を介して $E('ajaxLoad') をロードします。 ='http://js.wcdn.cn/aj/mblog/face'; var d = (new Date()).valueOf(); STK.core.io.ajax({ url : url, onComplete : function( json) { console.log('ajax: '+ ((new Date()).valueOf() - d)) } };};HTML ページ:/aj/webWorker/worker.html
<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8/><title>ワーカーの例: データのロード</title><script src=http ://js.t.sinajs.cn/STK/js/gaea.1.14.js type=text/javascript></script><script type=text/javascript src=http://js.wcdn.cn/aj/webWorker/core.js></script></head><body> <input type=button id=workerLoad value=Web ワーカー負荷></input> < input type=button id=jsonpLoad value=jsonpload></input> <input type=button id=ajaxLoad value=ajaxload></input></body></html>
ホストのセットアップ
127.0.0.1 js.wcdn.cn
http://js.wcdn.cn/aj/webWorker/worker.html を通じてページにアクセスし、次の 3 つの方法でデータをロードしてコンソール出力を取得します。
ウェブワーカー: 174jsonp: 25ajax: 38
何度か試した結果、jsonp と ajax を介してデータをロードする時間の差はそれほど変わらないことがわかりました。Web ワーカーのロード時間は常に高いレベルにあるため、Web ワーカーを使用してデータをロードしても、それでも比較的遅いことがわかりました。データ量が大きい場合には利点はなく、ワーカーが新しいスレッドを初期化するのに時間がかかる可能性があります。ロード中にブロックされないこと以外の利点はありません。
それでは、Web ワーカーはクロスドメイン JS の読み込みをサポートできますか? 今回は、http://127.0.0.1/aj/webWorker/worker.html を通じてページにアクセスします。Web ワーカーの読み込みボタンをクリックしても、Chrome には何も反映されません。以下のエラーメッセージが表示されます。このことから、Web ワーカーは JS のクロスドメイン読み込みをサポートしていないことがわかります。これは、静的ファイルを別の静的サーバーにデプロイする Web サイトにとっては悪いニュースです。
したがって、Web ワーカーは同じドメイン内の json データを読み込むためにのみ使用できますが、ajax はすでにこれを実行でき、より効率的で多用途です。ワーカーに得意なことをやらせましょう。
4: まとめWeb ワーカーは素晴らしく見えますが、悪魔です。
私たちにできること:
1. JS をロードして、メインプロセスをハングさせることなく多数の複雑な計算を実行し、postMessage、onmessage を通じて通信できます。
2. importScripts(url) を使用して追加のスクリプト ファイルをワーカーにロードできます。
3. setTimeout()、clearTimeout()、setInterval()、clearInterval() を使用できます。
4. XMLHttpRequest を使用してリクエストを送信できます
5. ナビゲーターの一部のプロパティにアクセスできます
制限事項は何ですか:
1.ドメインを越えてJSをロードできない
2. ワーカー内のコードは DOM にアクセスできません
3. さまざまなブラウザではワーカーの実装が異なります。たとえば、FF ではワーカー内に新しいワーカーを作成できますが、Chrome ではできません。
4. すべてのブラウザがこの新機能をサポートしているわけではありません
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。