Optimización de Javascript (IX). Creando una cola de ejecución

Tal y como hemos visto en las 8 entradas anteriores, hay que optimizar todo lo referente a javascript y su carga ya que éste bloquea la ejecución durante la carga.

Lo hemos movido a otro sitio de la página, lo hemos minimizado, lo hemos cargado en diferido, pero aún no había tratado sobre el código javascript de tipo inline, es decir, el que ponemos en medio del códgido para hacer cualquier cosa. Bueno, pues ahora vamos a ver cómo optimizar éste código también para dar una mayor velocidad de carga de nuestra página.

1.- El secreto de todo está en crear un objeto para poner en una cola de ejecución todas nuestras llamadas de tipo inline. Así, lo primero que tendremos que hacer es

var miaplicacion = { queue: [] };

Con ésto creamos un contexto de ejecución para todas las llamadas además de crear un array para encolar las ejecuciones.

2.- Ahora tenemos que sustituir todas las llamadas inline como por ejemplo

<script>alert("Zas!");</script>

por

<script>
    miaplicacion.queue.push(function() { 
        alert("Zas!"); 
    }
</script>

3.- Ya hora la guinda. Una vez llegamos al final de la página, justo antes del </body> que es donde ya estamos seguros de que se ha cargado todo el DOM (así no es necesario enlazar con el evento de DOMReady con lo que arañamos aún más milésimas de tiempo de ejecución), ejecutamos la cola mediante el siguiente código:

<script>
    var l = miaplicacion.queue.length;
    for(var i = 0; i < l; i++) {
        miaplicacion.queue[i]();
    }
</script>