Compartir
Publicidad

JQuery DOM y Rendimiento

JQuery DOM y Rendimiento
0 Comentarios
Publicidad
Publicidad

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>
<script type="text/javascript">

    $(document).ready(function() {

        $(":button").click(function() {
        for(var i=0;i<10;i++) {


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

        });

    });
</script>
</head>
<body>
<ul id="lista">
<li>mensaje1</li>
</ul>
<input type="button" value="generar"/>
</body>
</html> 

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

001.png

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.

002-1.png

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 lo 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.

renderiza.png

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>
<script type="text/javascript">

    $(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>
<ul id="lista">
<li>mensaje1</li>
</ul>
<input type="button" value="generar"/>

</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.

renderok.png

De esta forma solo realizamos un renderizado y el rendimiento mejorará.

Temas
Publicidad
Comentarios cerrados
Publicidad
Publicidad
Inicio