Introducción
Recuerdo que utilicé los Web Workers en JavaScript una vez que tenía que generar un PDF muy grande. Así, aunque fuera un proceso tardado, la interfaz de usuario no se quedaba congelada.
Veamos entonces un demo o ejemplo y la explicación de los web workers o webworkers en el lenguaje de programación JavaScript
Probar proyecto terminado
Si quieres ver la diferencia entre usar o no usar los Web Workers aquí dejo estos enlaces para calcular números primos, cosa que es muy tardada.
Sigue leyendo si quieres saber más.
¿Qué es un Web Worker en JavaScript?
Es una nueva (no tan nueva pero su uso no está tan extendido) API que nos permite ejecutar procesos en segundo plano. Recordemos por ejemplo las llamadas asíncronas, se hacen para no congelar la interfaz del usuario.
Por ejemplo, si no existiera el código asíncrono e hiciéramos una petición GET cuya duración fuera de 10 segundos, el usuario no podría hacer nada (no hacer click en botones, no ver animaciones) por 10 segundos.
Entonces cuando hacemos un proceso pesado o largo que no puede ser asíncrono, usamos los Web Workers en Javascript.
¿Cómo funcionan los web workers en JavaScript?
Se comunican a través de mensajes, así como cuando llamamos a funciones. Para pasarles datos llamamos a la función postMessage.
Y cuando el worker quiere hablarnos, dispara el evento onmessage.
Ah, antes de que lo olvide. Los Workers no pueden manipular directamente al DOM, sólo pasan o reciben mensajes y procesan datos.
Ejemplo de uso de Web WorkerS en JavaScript
Vamos a calcular números primos. Mejor dicho, buscaremos cuál es el número primo más grande menor al número 150, 000.
Números primos
Los números primos son aquellos que sólo son divisibles entre 1 y entre ellos mismos.
Por ejemplo, el 11 es primo porque no puede ser dividido entre 2, ni entre 3, 4, 5, 6, 7 8, 9 o 10. Se dice que “puede ser dividido” cuando su residuo es cero.
Pero no vamos a ver el algoritmo, vamos a calcular números primos “a lo tonto” para que sea un proceso tardado. Me he robado de por ahí un algoritmo para determinar si un número es primo:
Ahora en el Web Worker vamos a comprobar cuál es el mayor número primo menor a 150,000
Programación del worker para el cálculo
El código completo del worker queda así:
Como vemos es un ciclo for, vamos comprobando por cada número si éste es primo y en caso de que sí, lo tomamos como el mayor encontrado.
Cuando salimos del ciclo for llamamos a la función postMessage. Esta función es la más importante, pues sirve para enviar mensajes ya sea del hilo principal al worker, o del worker al hilo principal.
También es importante la función onmessage, pues es llamada cuando recibimos un mensaje.
Llamada e inclusión del web worker en una página web
Ahora en nuestro hilo principal (esto es en nuestra página HTML) tenemos este código:
Por favor lee el código, tiene comentarios que lo explican.
Es importante mencionar que debemos servir la página en HTML en un servidor, puede ser Apache sobre Windows o cualquiera que prefieras.
El punto es que no debemos abrirlo con file:///, sino con un servidor HTTP.
Probando web worker
Ahora cuando navegamos a la página en un inicio se ve esto (al menos en mi lenta computadora):
Pero después de unos segundos (si tu computadora es muy rápida puedes hacer más grande el número, y si es más lenta, lo contrario) aparece el mensaje:
No sé si es cierto que el número es 149, 993. Lo que sí sé es que el worker se ejecutó con éxito en segundo plano sin bloquear mi interfaz.
Ahora se me ocurre algo muy interesante, ¿qué pasaría si no usamos Web Workers en JavaScript? veamos cómo no podremos hacer click en el botón.
Si los workers no existieran…
Veamos entonces cómo hacer lo mismo pero sin web worker. Todo quedaría en el mismo archivo:
Usamos un setTimeout para esperar antes de ejecutar el proceso pesado. Así, al inicio sí podemos clickear al botón pero luego de 2 segundos no podemos hacer nada hasta que el proceso termina.
Esta es la gran ventaja de los web workers en JavaScript: que no son bloqueantes y procesan tareas difíciles en un hilo diferente al principal.
Repaso y conclusión
- Sirven para ejecutar tareas costosas en segundo plano
- Reciben mensajes a través del evento onmessage. Y envían mensajes con postMessage. Igualmente podemos llamar al método postMessage para llamar al worker, y escuchar su evento onmessage para cuando él nos hable
- No están disponibles en todos los navegadores aunque sí en la gran mayoría
Recuerda que puedes probar los ejemplos directamente en tu navegador
