はじめに

Web ワーカーは、Web コンテンツのバックグラウンドスレッドでスクリプトを実行する簡単な方法を提供します。スレッドは、ユーザーインターフェイスを妨げることなくタスクを実行できます。さらに、XMLHttpRequest を使用して I/O を実行できます (ただし、responseXML 属性とチャネル属性は常に空です)。ワーカーを作成すると、そのコードで指定されたイベントハンドラーにメッセージをパブリッシュすることで、ワーカーを作成した JavaScript コードにメッセージを送信できます (逆も同様)。

Web Worker を使用するための重要なポイント

同一生成元の制限: Worker スレッドに割り当てられるスクリプトファイルは、メインスレッドのスクリプトファイルと同じ生成元を持つ必要があります。
DOM の制限: ワーカースレッドが配置されているグローバルオブジェクトは、メインスレッドと異なるため、メインスレッドが配置されている Web ページの DOM オブジェクトを読み取ることはできず、ドキュメント、ウィンドウ、および親オブジェクトを使用することはできません。。ただし、ワーカースレッドはナビゲーターオブジェクトとロケーションオブジェクトをナビゲートできます。
通信: ワーカースレッドとメインスレッドは同じコンテキスト内にないため、メッセージを通じて通信を完了する必要があります。
スクリプトの制限: ワーカースレッドは、alert() メソッドとconfirm() メソッドを実行できませんが、XMLHttpRequest オブジェクトを使用して AJAX リクエストを行うことができます。
ファイル制限: ワーカースレッドはローカルファイルを読み取ることができません。つまり、ローカルファイルシステム (file://) を開くことができません。ロードするスクリプトはネットワークから取得する必要があります。後ほど対応させていただきます。

http-server をインストールします

ワーカースレッドはローカルファイルを読み取ることができません。つまり、ロードするスクリプトはネットワークから取得する必要があります。したがって、プロジェクトを実行する余裕があります。 http-server を使用するのが最も簡単です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');
}

ログイン後にコピー

在worker文件夹下，命令行输入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;
});

ログイン後にコピー

基本的な使用方法

worker

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

ログイン後にコピー

新しい worker スレッドの作成は非常に簡単で、次のようにするだけです。

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

ログイン後にコピー

main.js

```
console.log("I'm worker2")
```
ログイン後にコピー
worker.js:
```
console.log("I'm worker3")
```
ログイン後にコピー
rrreee
上記からわかるように、worker は onmessage を渡してデータをリッスンし、postMessgae 経由でデータを送信します