HTML Web Workers API

---

Un web worker es un código/archivo JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la página.

---

¿Qué es un web worker?

Cuando se ejecutan scripts en una página HTML, la página deja de responder hasta que finalice el script.

Un web worker es un código/archivo JavaScript que se ejecuta en segundo plano, independientemente de otros scripts, sin afectar el rendimiento de la página. Puedes continuar haciendo lo que quieras: hacer clic, seleccionar cosas, etc., mientras el web worker se ejecuta en segundo plano.

---

Compatibilidad con el navegador

El número en la siguiente tabla, especifica la primera versión del navegador que fue completamente compatible con web worker:

---

Ejemplo

El siguiente ejemplo crea un web worker simple que cuenta números en segundo plano:

Ejemplo:

---

Comprueba la compatibilidad de web worker

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

Ejemplo:

if (typeof(Worker) !== "undefined") {
  // Si! el navegador soporta Web worker!
  // Algo de código....
} else {
  // Disculpe! El navegador no soporta Web Worker...
}

---

Crea un archivo web worker

Ahora, crearemos nuestro web worker en un archivo externo JavaScript.

Aquí, creamos un script que cuenta. El script se almacena en el archivo "demo_workers.js":

Ejemplo:

var i = 0;

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

timedCount();

La parte importante del código anterior es el método postMessage(), que se utiliza para mostrar un mensaje en la página HTML.

Nota: normalmente, los web worker no se utilizan para scripts simples, sino para tareas más intensivas de CPU.

---

Crea un objeto web worker

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

Las siguientes líneas verifican si web worker ya existe, si no, 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.

Agrega un detector de eventos onmessage al werb worker.

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

Cuando el web worker publica un mensaje, se ejecuta el código dentro del detector de eventos. Los datos de web worker se almacenan en event.data.

---

Termina un web worker

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

Para terminar un web worker y liberar recursos del navegador, use el método terminate().

Ejemplo:

w.terminate();

---

Reutiliza

Si estableces la variable worker como indefinido, después de que haya terminado, puedes reutilizar el código.

Ejemplo:

w = undefined;

---

Código de ejemplo

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

Ejemplo:

---

Web worker y el DOM

Dado que los web worker están en archivos externos, no tienen acceso a los siguientes objetos de JavaScript:

• El objeto window

• El objeto document

• El objeto parent

---

Resumen

Un web worker es un código/archivo JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la página.

---

Traducido con 💚 desde W3Schools.com