Una de las buenas prácticas de Javascript es el uso de eventos para separar la estructura de la funcionalidad, en ella especificamos la funcionalidad que los elementos indicados deberán ejecutar al ser accionados.

Este uso de eventos, puede ser tratado de dos formas:

• Gestión de eventos
• Delegación de eventos

Ambas ofrecen el mismo resultado, aunque, como veremos una es más óptima que otra a la hora de gestionar grandes cantidades de elementos.

Para enteder las diferencias entre ellas, mejor ver unos ejemplos y luego los comentamos.

HTML

<ul id="nav">
 <li><a href="#hola">Hola</a></li>
 <li><a href="#hola2">Hola2</a></li>
 <li><a href="#hola3">Hola3</a></li>
 <li><a href="#hola4">Hola4</a></li>
 <li><a href="#hola5">Hola5</a></li>
</ul>

Gestión de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   var as = nav.getElementsByTagName("a");
   for (var x = 0; x < as.length; x++) {
     as[x].onclick = function(){
        alert(this.innerHTML);
     }
   }
</script>

Como vemos esta técnica se basa en asociar un evento a cada link del listado #nav. Esto nos hace tener que recorrer todos los enlaces que encontramos dentro del listado y asociarle el evento.

Delegación de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   nav.onclick = function(e){
      var e = e || window.event; // Obtenemos el evento
      var el = e.target || e.srcElement; // Obtenemos el elemento que lanza el evento
      alert(el.innerHTML);
   }
</script>

Con esta opción delegamos al elemento #nav la tarea de decidir que elemento se está ejecutando y la tarea asociada a ellos. Esto es posible gracias al orden de ejecución de eventos sobre varios elementos.

Rendimiento

He hecho una serie de pruebas, sobre este mismo código, añadiendo 300/900 y 5000 elementos.

Tenemos que partir de dos mediciones a tener en cuenta:

• Tiempo en aplicar los eventos
• Tiempo en ejecutar el evento

A simple vista ya podemos conocer el resultado, la primera opción se vé penalizada por tener que aplicar a cada elemento del listado la funcionalidad, pero una vez hecho esto, la ejecución rápida y simple, ya que está asociada al elemento.

Por otro lado, la segunda opción es mucho más rápida a la hora de asociar la funcionalidad al elemento ya que siempre, sin importar el número de subelementos haya,  será un único elemento al que asociar. Pero por otro lado nos encontramos con que la ejecución de la funcionalidad debe detectar el elemento y despues la funcionalidad asociada.

Conclusiones

Como siempre digo, no es una forma mejor que otra, son diferentes formas que al conocerlas nos permitirá decidir cual es la que más se ajusta a las necesidades de cada proyecto.

Fuente: www.anieto2k.com

La fuente original es el blog de SproutCore, aunque en el blog de anieto2k encontramos explicado todo en detalle en español. A continuacion podran ver su uso:

El problema

El problema radica en que las aplicaciones muy ricas en Javascript suelen ser muy pesadas para el procesador y el navegador, despues de descargar el JS, parsear el script lo ha de evaluar (internamente) para poner a nuestra disposición todas las funcionalidades que hayamos desarrollado, en este último punto es donde más se penaliza la ejecución de JS (hasta un 80% del tiempo de carga total).

La propuesta

Para solventar el problema, nos propone cargar el Javascript de una forma diferente, en lugar de código usar comentarios. Osea, hacer que todo el código Javascript sea un gran comentario.

/*
function mifuncion(){
....
}

var lala = mifuncion();
lala.prototype.bla = function(){
 ...
}

....
*/

Explicación

Al tratarse de un comentario el navegador no lo evalua y nos ahorramos un tiempo de carga muy valioso y podemos hacer que la carga del código sea cosa nuestra haciendo uso únicamente de él cuando lo necesitemos. Esto nos permite tener un control sobre el Javascript que está ejecutado en todo momento.

(Ver Imagen)

Como vemos en el gráfico, la evaluación de comentarios es ligeramente menor a la de una cadena de texto y muy menor a la de funciones.

En dispositivos móviles este tiempo parece más significativo como podemos ver en la imagen siguiente:

(Ver Imagen)

Implementándolo

<html>
[...]
<!-- Javascript que será ejecutado posteriormente -->
<script id="lazy">
/*
Código Javascript
*/
</script>
[...]
<script>
 // Función encargada de recoger el contenido del <script id="lazy" /> y evaluarlo
 function lazyLoad() {
 var lazyElement = document.getElementById('lazy');
 var lazyElementBody = lazyElement.innerHTML;
 var jsCode = lazyElementBody.replace(/(\/\*|\*\/)/g,''); // Eliminamos (/*|*/)
 eval(jsCode);
 }
</script>
[...]
<!-- Activamos la carga del JS al hacer click-->
<div onclick=lazyLoad()> Lazy Load </div>
</html>

Como vemos en el código, el sistema básicamente lo que hace es cargar el javascript como un tag con un el código Javascript comentado completamente por lo que el navegador lo omitirá en el momento de evaluarlo.

lazyLoad() se encarga de coger el innerHTML del elemento que hemos cargado previamente con el javascript comentado, elimina los carácteres que indica que sea un comentario (en el ejemplo elminará todos los carácteres /* y */ del innerHTML, por que hay que usarlo con cabeza) y posteriormente lo evalua con eval().

Resultado

La ventaja de este sistema es que nos permite ejecutar ese código cuando queremos y no cuando está cargando la página, mayor control y sobretodo mayor velocidad global de la aplicación.

En los ejemplo de SproutCore obtienen una mejoría de entre 3x y 20x frente a la versión de carga secuencial de Javascript.