Webワーカー：指定されたスクリプトをバックグラウンドスレッドで実行します

Web Workersを使用すると、JavaScriptをバックグラウンドスレッドで実行できます。このスレッドでは、ユーザーインターフェイスに干渉することなくタスクを実行できます。

使用規則

workerWorker()構築されたインスタンスオブジェクトを使用して、バックグラウンドスレッドで名前付きJavaScriptスクリプトを実行します。
workerインスタンスオブジェクトは、それを作成したJavaScriptコードに情報を送信することで作成できます。
workerオブジェクトではなく、別のグローバルコンテキストで実行されwindowます。
workerDOMノードを直接操作したりwindow、オブジェクトのデフォルトのメソッドやプロパティを使用したりすることはできません。
workerpostMessage()メインスレッドとメインスレッドの間で、それぞれのデータがメソッドを介して送信され、onmessageイベントハンドラーがデータに応答するために使用され、データはmessageイベントのdataプロパティにあります。
workerメインスレッドとの間でやり取りされるデータは、追加でコピーされたデータです。
メインスレッドは、インスタンスオブジェクトのterminate()メソッドを使用してインスタンスをすぐに終了できますworker。
worker内部的には、スレッドはclose()それ自体を閉じるために使用できます。
worker利点の1つは、UIスレッドをブロックせずにプロセッサを集中的に使用する操作を実行できることです。

アプリケーション例

次のコードに示すように、互換性チェックは最初にメインスレッドでworker.js実行され、によって実行されるを作成しWorkerます。myWorker.postMessage()メッセージを送信する。myWorker.onmessage応答によってWorker返されるメッセージ。

const a = 1;
const b = 2;

if (window.Worker) {
  const myWorker = new Worker('./worker.js');
  myWorker.postMessage({ a, b });

  myWorker.onmessage = e => {
    console.log('收到worker的信息...');
    console.log(e.data);
  };
}
复制代码

ではWorker、onmessageメインスレッドから送信されたメッセージに応答し、処理を行ったpostMessage後、メッセージをメインスレッドに返します。

// worker.js
onmessage = e => {
  console.log('收到主线程的信息...');
  const { a, b } = e.data;
  const sum = a + b;
  postMessage(sum);
};
复制代码

ここから、メインスレッドでそれを確認でき、オブジェクトにハングアップする必要がありonmessageます。また、内部的には、独自のスコープがあるため、そうする必要はありません。postMessage()workerworkerworker

如下代码所示，在worker的onmessage中打印this：

onmessage = e => {
  console.log(this);
};
复制代码

终止 worker

在上述代码中，若在主线程中调用myWorker.terminate()，则不会收到任何消息，因为worker线程刚创建完毕就被终止。

const a = 1;
const b = 2;

if (window.Worker) {
  const myWorker = new Worker('./worker.js');
  myWorker.postMessage({ a, b });
  // 终止myWorker
  myWorker.terminate();

  myWorker.onmessage = e => {
    console.log('收到worker的信息...');
    console.log(e.data);
  };
}
复制代码

同样，在worker线程中调用close()，主线程也不会有任何响应，因为线程刚启动就被关闭。

close();

onmessage = e => {
  console.log('收到主线程的信息...');
  const { a, b } = e.data;
  const sum = a + b;
  postMessage(sum);
};
复制代码

共享 worker

主线程：

const a = 1;
const b = 2;

if (window.Worker) {
  const myWorker = new SharedWorker('./worker.js');
  myWorker.port.postMessage({ a, b });

  myWorker.port.onmessage = e => {
    console.log('收到worker的信息...');
    console.log(e.data);
  };
}
复制代码

worker线程：

onconnect = e => {
  const port = e.ports[0];

  port.onmessage = e => {
    const { a, b } = e.data;
    const sum = a + b;
    port.postMessage(sum);
  };
};
复制代码

参考：

Using Web Workers