Web Workers API en Javascript

Web Workers API en Javascript

Introducción a los web workers

Un Web Worker es un objeto que ejecuta un archivo de Javascript en su propio hilo (thread), ya que todo el Javascript que se ejecuta en el navegador lo hace en un único hilo principal.

El hilo principal es donde se procesa toda la información de la página, esto significa que cualquier proceso de larga duración que suceda en el navegador (JavaScript) puede bloquear el hilo principal, provocando que la página no responda y generando una muy mala experiencia del usuario.

Sabiendo que solo tenemos ese hilo principal, podemos decir que cuanto menor sea el procesamiento en el hilo principal mas fluida será la experiencia del usuario.

Gracias a este comportamiento podemos observar una clara ventaja cuando usamos Web Workers, ya que el fichero y por lo tanto los scripts se van a ejecutar en el hilo del worker dejando libre el hilo principal.

Limitaciones de los web workers

A continuación veremos las limitaciones que tienen los web workers:

Como funciona

La comunicación entre los workers y el hilo principal se realiza mediante un sistema de mensajes.

El envío de mensajes lo realizaremos usando el método postMessage(), tanto para el hilo principal como el web worker.

Una vez enviados los datos usaremos el listener del evento onmessage que podremos encontrar en la propiedad data del evento.

Es importante tener en cuenta que los datos se están copiando, en ningún momento se comparten.

index.js

const worker = new Worker('web-worker-fetch.js');
worker.addEventListener('message', evt => {
   console.log(evt.data);
});
worker.postMessage(payload);


webworker.js

onmessage = (event) => {
    postMessage(`web worker receives a message "${event.data}" from the main thread`);
}

Para terminar añadiré un pequeño ejemplo que puedes probar desde aquí y si quieres ver el código fuente puedes acceder al repositorio pulsando aquí.