21.- Juegos y Multimedia en HTML5 - Web Workers, concurrencia en la web.

Seguimos avanzando capítulos en nuestro curso y hoy es el turno de los Web Workers. Gracias a ellos vamos a poder ejecutar código JavaScript en paralelo. Esto hará nuestra página mucho más eficiante y evitará que largos scripts bloqueen la interfaz gráfica de usuario.
En muchos de los videotutoriales anteriores hemos usado funciones como setInterval, setTimeout y XmlHttpRequest para conseguir sensación de simultaneidad. Pero sólo era eso, una sensación. Realmente las funciones callback que se le pasaban como parámetros eran ejecutadas en el mismo proceso que la interfaz gráfica y el resto de código JavaScript de la página. Con los Web Workers no será así, se ejecutarán en un proceso completamente independiente, lo que nos permitirá realizar tareas en paralelo aumentando de esta forma el rendimiento de nuestra página.

Presentación


Para este videotutorial he usado una presentación, podéis verla aquí debajo.
El formato de la presentación está cambiado con respecto al que se muestra en el vídeo, es debido a que el Google Drive no lo interpretaba correctamente.


Vídeo



Ejemplo en acción.

Si deseas ver la página que hemos creado en el videotutorial puedes hacer clic aquí.

Codigo.

Es importante mencionar que el número de veces que se ejecuta el loop puede que no sea suficiente para un ordenador rápido o que sea demasiado largo para ordenadores lentos. Prueba a variar dichos números.
Éste es el código usado en la página principal, es decir, en webworkers.html
<!DOCTYPE html>
<html>
  <head>
    <title>Web Workers</title>
    <meta charset="UTF-8">
    <meta name="author" content="http://programmingheroes.blogspot.com.es">
    <style>
      body {
        background: #F34A39;
      }
    </style>
    <script>

    window.onload = function()
    {
      var main = document.getElementById("main");
      main.onclick = function()
      {
        var i = 0;
        while ((i++) < 200000000);
        console.log("Fin");
      }
      var workerr = document.getElementById("worker");
      workerr.onclick = function()
      {
        var worker = new Worker("workers/worker.js");
        worker.addEventListener("message", function (e)
        {
          console.log(e.data);
          console.log("Fin");
        });
        worker.postMessage(
        {
          "saludo": "hola",
          "despedida": "adios"
        });
      }
    }

    </script>
  </head>
  <body>
    <button id="main">Ejecutar loop hilo principal</button>
    <br />
    <button id="worker">Ejecutar loop worker</button>
  </body>
</html>

Éste otro código es usado en el archivo worker.js
addEventListener("message", function (e)
{
 var i = 0;
    while ((i++) < 1000000000);
    console.log(e.data.saludo);
    this.postMessage("Hola main");
});

No hay comentarios :

Publicar un comentario