実習二十二日目(Web workerマルチスレッド)

HTMLページでスクリプトを実行すると、スクリプトが完了するまでページの状態は応答できません.web workerはバックグラウンドで実行されるJavaScriptで、他のスクリプトとは独立してページのパフォーマンスに影響しません.Web workerはバックグラウンドで実行され、HTML 5でワークスレッド(Web Workers)の概念、すなわちマルチスレッドの概念を提案し、ユーザーインタフェースを凍結することなく、多くの計算されたコードをWeb workerに渡して実行することができます.
Web Workersの3つの主な特徴:
1)長時間運転可能(応答)
2)理想的な起動性能
3)理想的なメモリ消費量
Web Workersでは、開発者がユーザーに中断されずに長時間実行できるバックグラウンドプログラムを作成し、トランザクションやロジックを実行し、ページのユーザーへのタイムリーな応答を保証できます.
Web Workerの基本原理は、現在のjavascriptのメインスレッドで、Workerクラスを使用してjavascriptファイルをロードして新しいスレッドを開き、実行をブロックしない効果を発揮し、メインスレッドと新しいスレッド間のデータ交換のインタフェースを提供することです.postMessage、onmessage.
例:

//worker.js

onmessage =function (evt){

  var d = evt.data;//  evt.data        

  postMessage( d );//             

}

HTMLページ:test.html

//WEB    

var worker =new Worker("worker.js"); //    Worker                   URL

worker.postMessage("hello world");    // worker    

worker.onmessage =function(evt){    //  worker        

  console.log(evt.data);              //  worker      

}

Chromeブラウザでtestを開きます.html後、コンソール出力「hello world」はプログラムの実行に成功したことを示します.
この例から,web workerの使用は主に以下の部分に分かれていることがわかる.
WEBメインスレッド:
1.worker=new Worker(url)でJSファイルをロードしてworkerを作成し、workerインスタンスを返します.
2.worker経由postMessage(data)メソッドでworkerにデータを送信します.
3.workerをバインドする.onmessageメソッドはworkerから送信されたデータを受信します.
4.workerを使用できます.terminate()は、workerの実行を終了します.
ワークの新しいスレッド:
1.postMessage(data)メソッドによりプライマリスレッドにデータを送信する.
2.onmessageメソッドをバインドして、プライマリスレッドから送信されたデータを受信します.