JavaScriptのWeb Worket

紹介する
Web Workカーは、Webコンテンツのバックグラウンドスレッド内でスクリプトを実行するための簡単な方法を提供する.スレッドはユーザインタフェースと干渉することなくタスクを実行することができる.また、彼らはXMLHttpRequestを使ってI/Oを実行することができます.作成すると、ワーカーは、そのコードによって指定されたイベントハンドラにメッセージを送ることができます.
Web Workerの使い方のポイント

ソース制限:Workカースレッドに割り当てられたスクリプトファイルは、メインスレッドのスクリプトファイルと同じソースでなければなりません.

DOM制限:Workカースレッドがあるグローバルオブジェクトは、メインスレッドとは違って、ホームスレッドがあるウェブページのDOMオブジェクトを読めないし、document、window、parentなどのオブジェクトも使えない.しかし、Workカースレッドはnavigatorオブジェクトとlocationオブジェクトがあります.

通信連絡:Workerスレッドとメインスレッドは同じコンテキストではなく、直接通信できないので、メッセージを通じて完了しなければなりません.

スクリプト制限:Workerスレッドはalert()方法とconfirm()方法を実行できませんが、XMLHttpRequestオブジェクトを使用してAJAX要求を送信することができます.

ファイル制限:Workerスレッドはローカルファイルを読めません.すなわち、マシンのファイルシステムを開けません.ロードされたスクリプトは、ネットワークから必要です.後は私達が処理することができます.

http-serverをインストールします
Workカースレッドはローカルファイルを読めません.つまり、本マシンのファイルシステムを開けません.ロードされたスクリプトは、ネットワークから必要です.だから私たちはプロジェクトを始めるべきです.http-serverを使用して、最も簡単にインストールできます.

> cnpm i -g http-server

使用:

> http-server

基本的な使い方
私達は新しいフォルダを作って、名前はworkerです.中に新しい三つのファイルはそれぞれです.

index.html
main.js
worker.js

workerスレッドを新規作成するのは簡単です.

var worker = new Worker('worker.js')

main.js:

var worker = new Worker('./worker.js')
console.log('worker running')
worker.addEventListener('message',e => {
    console.log('main: ', e.data);
})
//     ：
// worker.onmessage = (e)=>{
//     console.log('main: ', e.data);
// }
worker.postMessage('hello worker,I am from main.js')

worker.js:

console.log('worker task running')
onmessage = (e)=>{
    console.log('worker task receive', e.data);
    //       
    postMessage('Hello, I am from Worker.js');
}

ワーカーフォルダの下で、コマンドラインにhttp-serverを入力して、プロジェクトをスタートして、ブラウザで開けて、コンソールを見ます.

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js

上記からは、workerがonmessageを介してデータを傍受し、postMessgaeを介してデータを送信することが見られます.
ウォーカーを終了する

worker.terminate();

処理を誤る

worker.addEventListener('error',  (e) => {
  console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});

event.filename:エラーが発生したWorkerスクリプトの名前.

event.message:エラーの情報.

event.lineano:エラーが発生した行番号.

外部スクリプトを読み込み
mail.js

var worker = new Worker('./worker1.js');

ウォーカー1.js

console.log("I'm worker1")
importScripts('worker2.js', 'worker3.js');
//   
// importScripts('worker2.js');
// importScripts('worker3.js');

ウォーカー2.js

console.log("I'm worker2")

ウォーカー3.js

console.log("I'm worker3")

互換性
https://caniuse.com/#feat=webworkersの互換性はまだ楽観的ではないですが、移動先での互換性はいいです.
参照
Web Workersを使う Web Workカーの使用教程
Github
wclimb