Web Worker API

Web Worker es JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la página.

¿Qué es Web Worker?

Cuando se ejecuta un script en una página HTML, la página no responde hasta que el script se complete.

Web Worker es JavaScript que se ejecuta en segundo plano, independientemente de otros scripts, sin afectar el rendimiento de la página. Puede seguir haciendo lo que quiera: hacer clic, seleccionar contenido, etc., mientras el web worker se ejecuta en segundo plano.

Compatibilidad del navegador

Los números en la tabla indican la primera versión de los navegadores que admiten completamente Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Enero de 2010 Septiembre de 2012 Junio de 2009 Junio de 2009 Junio de 2011

Instancia de Web Worker

El siguiente ejemplo crea un Web Worker simple que realiza cálculos en segundo plano:

Ejemplo

Cuenta:

Prueba personalmente

Revisar el navegador de Web Worker

Antes de crear un web worker, verifique si el navegador del usuario lo admite:

if (typeof(Worker) !== "undefined") {
  // ¡Sí! Soporte para Web worker!
  // Alguno de código.....
else {
  // Disculpe! No hay soporte para Web Worker...
}

创建 Web Worker 文件

Ahora, creemos nuestro Web Worker en JavaScript externo.

Aquí, creamos un script importante. Este script se almacena en el archivo "demo_workers.js":

let i = 0;
function timedCount() {
  i++;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

La parte importante del código anterior es postMessage() Método - Utilizado para enviar mensajes de vuelta a la página HTML.

Notas:Generalmente, los web workers no se utilizan para este tipo de scripts simples, sino para tareas intensivas en CPU.

Crear objeto Web Worker

Ahora que tenemos el archivo web worker, necesitamos llamarlo desde la página HTML.

La siguiente línea de código verifica si el worker ya existe, si no existe, crea un nuevo objeto web worker y ejecuta el código en "demo_workers.js":

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

Luego podemos enviar y recibir mensajes del web worker.

Añadir un "onmessage" listener al web worker.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Cuando el Web Worker publique un mensaje, se ejecutará el código en el listener de eventos. Los datos del Web Worker se almacenan en event.data.

Terminar Web Worker

Cuando se crea el objeto web worker, continuará escuchando mensajes (incluso después de que el script externo se complete) hasta que se termine.

Para terminar el web worker y liberar recursos del navegador/computadora, utilice terminate() Método:

w.terminate();

Reutilización de Web Worker

Si se establece la variable worker en undefined, después de que finalice, se puede reutilizar el siguiente código:

w = undefined;

Código completo de ejemplo de Web Worker

Ya hemos visto el código del Worker en el archivo .js. A continuación, se muestra el código de la página HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Detener Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Prueba personalmente

Web Worker y DOM

Dado que los Web Worker se encuentran en archivos externos, no pueden acceder a los siguientes objetos JavaScript:

  • Objeto window
  • Objeto document
  • Objeto parent