Веб-воркеры: выполнение указанного скрипта в фоновом потоке.

С помощью Web Workers вы можете запускать JavaScript в фоновом потоке, где поток может выполнять задачи, не мешая пользовательскому интерфейсу.

правила использования

• workerзаключается в использовании Worker()сконструированного экземпляра объекта для запуска именованного сценария JavaScript в фоновом потоке.
• workerОбъект экземпляра можно создать, отправив информацию коду JavaScript, который его создал.
• workerВыполняется в другом глобальном контексте, а не в windowобъекте.
• workerУзлы DOM не могут управляться напрямую, а также нельзя windowиспользовать методы и свойства объектов по умолчанию.
• workerМежду основным потоком и основным потоком через метод postMessage()передаются соответствующие данные , и onmessageобработчик событий используется для ответа на данные, а данные находятся в свойствах messageсобытия .data
• workerДанные, передаваемые в основной поток и из него, дополнительно копируются .
• Основной поток может terminate()немедленно завершить работу экземпляра, используя методы объекта экземпляра worker.
• workerВнутри поток может использовать, чтобы close()закрыть себя.
• workerОдним из преимуществ является возможность выполнять ресурсоемкие операции без блокировки потока пользовательского интерфейса.

Примеры применения

Как показано в следующем коде, проверка совместимости сначала выполняется в основном потоке, создавая 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()должен висеть workerобъект. И workerвнутренне это не обязательно, потому что у него workerесть своя область применения.

如下代码所示，在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