Como utilizar los web workers en JavaScript

Uno de los mayores inconvenientes de JavaScript es que se trata de un lenguaje mono-hilo, de tal manera que cuando sobrecargamos ese hilo la ejecución del código queda detenida, y lo que es peor, la UI también ya que forma parte del único hilo. Afortunadamente hay una manera de evitar esta limitación y es con el uso de workers.

Los web workers forman parte de la Web API, esto implica que un worker no puede acceder al DOM de la página web. Los workers existen un hilo completamente diferente que nunca interfiere con el hilo principal, son creados desde este hilo, reciben y le devuelven mensajes al mismo, pero no tienen acceso directo al mismo. Un ejemplo de web worker serían las notificaciones push de navegador web.

¿Cómo se crean los web workers? Os pongo un ejemplo:

let worker;

if ('Worker' in window) {

  worker = new Worker('worker_example.js');

}

Cómo veis es muy sencillo, en worker_example.js debéis poner el código JavaScript que queréis ejecutar, recordad que no podéis acceder al DOM de la página web.

¿Cómo le enviamos un mensaje al worker? Pues continuando con el ejemplo de arriba:

worker.postMessage('Hola mundo');

Y lo recibimos en el worker de la siguiente manera:

this.addEventListener('message', event => {

  console.log(event.data);

});

Es bastante sencillo, lo cual es de agradecer. Nos queda la parte final, que el worker envíe mensajes al hilo principal.

this.postMessage('From Worker Thread');

Y recibir el mensaje desde el hilo principal de manera similar a la que hicimos con el worker anteriormente:

this.addEventListener('message', event => {

  console.log(event.data);

});

Una vez comiences a utilizar los workers ya no podrás vivir sin ellos, mejoran muchísimo la experiencia de usuario y te simplifican bastante la vida.

Espero que os sea de utilidad ^_^.