JQuery DOM y Rendimiento

Cuando programamos con Javascript el uso de JQuery es parte del día a día. JQuery se ha convertido para mucha gente en el nuevo «JavaScript», hasta que enfoques tipo Angular.js se impongan. ¿Para que utilizamos JQuery?

La mayoría de las veces utilizamos este framework para realizar modificaciones en el arbol DOM y cambiar dinamicamente contenidos de la página. Por ejemplo podríamos tener un bloque de código como el siguiente:

<html>

<head>

<script

type=»text/javascript» src=»jquery-1.11.1.min.js» >

</script>

$(document).ready(function() {

$(«:button»).click(function() {

for(var i=0;i<10;i++) {

$(«#lista»).append(«<li>mensaje» +(i+2)+ «</li>»);

}

});

</script>

</head>

<body>

<li>mensaje1</li>

</ul>

</body>

</html>

Estamos ante una sencilla lista de elementos y un botón.

Cuando pulsamos sobre el botón la lista, que inicialmente solo dispone de un elemento es modificada por JQuery y se le añaden los mensajes adicionales.

JQuery y Rendimiento

¿Es correcto lo que hemos desarrollado?. La respuesta no es absoluta, en principio si que hemos cumplido con la funcionalidad que se nos demandaba. Lamentablemente tenemos un pequeño problema. Un problema que en el día a día no es crítico pero que en algunas situaciones se acaba notando. Cada vez que nosotros añadimos un nuevo mensaje a la lista la página se vuelve a dibujar. Este proceso no le vemos ya que es tan rápido que nos parece que todos los mensajes se añaden a la vez. Sin embargo es un proceso que existe y que obliga al navegador a realizar n renderizados.

JQuery Detach una solución

Para evitar este comportamiento podemos hacer una sencilla modificación a nuestro código como la siguiente:

<html>

<head>

<script

type=»text/javascript» src=»jquery-1.11.1.min.js» >

</script>

$(document).ready(function() {

$(«:button»).click(function() {

var lista=$(«#lista»).detach();

for(var i=0;i<10;i++) {

lista.append(«<li>mensaje» +(i+2)+ «</li>»);

}

lista.prependTo(«input»);

});

</script>

</head>

<body>

<li>mensaje1</li>

</ul>

</body>

</html>

De esta forma estaremos usando el método detach() de JQuery que desliga la lista del Document Object Model para trabajar con ella fuera del árbol. Realizada esta operación ejecutaremos el bucle for que añade todos los li nuevos, para finalmente invocar al método prepend que nos añade de golpe la lista a la página.