HTML- Introducción a WebWorkers

Los WebWorkers se definen como una API para correr scripts, básicamente JavaScript, los cuales pueden correr en un thread distinto al de la ejecución principal , por lo que corren en “background” permitiendo que el browser continúe su operación normal mientras dicho script se está ejecutando. La especificación de Web Workers está separada de la especificación de HTML5, sin embargo pueden ser utilizados con la este último.

Existen dos tipos de WebWorkes: workers dedicados (Dedicated Workers) y workes compartidos, (Shared workers)

Cuando un webworkes está en ejecución no tiene acceso al DOM (Document Object Model), por lo que la comunicación con el documento se hace mediante el paso  de mensajes.

Veamos un problemática, me gustó el ejemplo de la documentación oficial, sobre encontrar números primos entre dos números, así que es el mismo que voy a exponer acá:

 <script type="text/javascript">
        var count = 0;

        $("#btnAddOne").click(function () {

            count++;

            $("#countResult").val(count);

        });

 

        // Calcular el Valor Primo

        var n = 1;

        search: while (true) {

            n += 1;

            for (var i = 2; i <= Math.sqrt(n); i += 1)

                if (n % i == 0)

                    continue search;

            //Primero encontrado!

            $("#primeResult").text(n);

        }

 

    </script>

El script anterior hace una intensa búsqueda para buscar los números primos, y si, da resultado, pero la experiencia de usuario al ejecutar el script es mala, debido a que el browser parece dejar de responder mientras se esta ejecutando el script.

Uso de Web Workers

Para comenzar a utilizar web workers primero debemos instanciarlo, lo que hacemos con:

var worker = new Worker('CalculoPrimos.js');

Con esta línea instanciamos el webworkers indicando la ruta del script que va a tener el procesamiento que se va a ejecutar en otro Thread.

Para enviar un Mensaje hacia el Worker lo podemos hacer mediante el método:

worker.postMessage("Este es un Mensaje!");

Y muy parecido, cuando queremos pasar un mensaje desde el worker hacia la página que lo instanció (esto estaría dentro de un archivo JS).

postMessage(n);

Ahora como quedaría el código utilizando Web Workers

<body>
 
    <button id="btnAddOne">Add One</button>
    <output id="countResult"></output>
 
    <h1>Calculo de Primos:</h1>
    Latest Prime: <output id="primeResult"></output>
 
    <script src="../Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
 
        var count = 0;
        $("#btnAddOne").click(function () {
            count++;
            $("#countResult").val(count);
        });
 
        // Calculo de Primos
        var worker = new Worker('CalculoPrimos.js');
        worker.onmessage = function (event) {
            $("#primeResult").text(event.data);
        };
  </script>
 </body>
Y el archivo CalculoPrimos.js:
var n = 1;
search: while (true) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1)
        if (n % i == 0)
            continue search;
    // Primo encontrado!
    postMessage(n);
}
 

Como puedes ver, La pagina principal instancia el Worker, luego el listener worker.onmessage  se gatilla cuando el worker hace el postMessage, de esta manera se produce la comunicación entre los dos hilos de ejecución, pudiendo así el browser continuar con su ejecución normal y sin dejar bloqueada la pantalla del browser.

Para resumir, podemos decir que la ejecución “normal” tiene el siguiente esquema:

image

Y con Web Workers podemos cambiar esto y tener:

image

 

Soporte

Sin duda, una mejora al momento de correr nuestros script, pero ahora vamos al soporte, no todo es color de rosas.Podemos detectar si el browser soporta esta capacidad con:

  function detecta_worker() {

      return !!window.Worker;

  }

Esta documentado que los navegadores que soportan esta funcionalidad son:

  • Firefox
  • Chrome
  • Opera
  • Safari
  • IE9

IE9 no soporta esta funcionalidad.

Te recomiendo ver este excelente artículo sobre Web Workers de HTML5Rocks, está muy bueno para seguir investigando sobre está interesante característica:

http://www.html5rocks.com/en/tutorials/workers/basics/

Saludos!

Chalalo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *