Web Workers: ejecuta el script especificado en un subproceso en segundo plano

Con Web Workers puede ejecutar JavaScript en un subproceso en segundo plano, donde el subproceso puede realizar tareas sin interferir con la interfaz de usuario.

reglas de uso

workeres usar Worker()el objeto de instancia construido para ejecutar un script de JavaScript con nombre en un subproceso de fondo.
workerSe puede crear un objeto de instancia enviando información al código JavaScript que lo creó.
workerSe ejecuta en otro contexto global, no en un windowobjeto.
workerLos nodos DOM no se pueden manipular directamente, ni se windowpueden usar los métodos y propiedades predeterminados de los objetos.
workerpostMessage()Entre el hilo principal y el hilo principal, los datos respectivos se envían a través del método, y el onmessagecontrolador de eventos se usa para responder a los datos, y los datos están en las propiedades del messageevento .data
workerLos datos pasados hacia y desde el subproceso principal se copian adicionalmente .
El hilo principal puede terminate()terminar la instancia inmediatamente usando métodos en el objeto de la instancia worker.
workerInternamente, un hilo puede usar para close()cerrarse.
workerUna de las ventajas es la capacidad de realizar operaciones que requieren un uso intensivo del procesador sin bloquear el subproceso de la interfaz de usuario.

Ejemplos de aplicación

Como se muestra en el siguiente código, la verificación de compatibilidad se realiza primero en el subproceso principal, creando un worker.jsarchivo ejecutado por Worker. Enviando myWorker.postMessage()un mensaje. El mensaje devuelto por la myWorker.onmessagerespuesta .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);
  };
}
复制代码

En Worker, onmessagerespondiendo al mensaje enviado por el hilo principal, después de algún procesamiento, postMessagedevolviendo el mensaje al hilo principal.

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

A partir de aquí podemos ver que en el hilo principal, onmessagey postMessage()debe colgar en el workerobjeto. E workerinternamente, no tiene que hacerlo, porque workertiene su propio alcance.

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