Yo soy de esos programadores web que están disfrutando con las bondades que nos ofrece JQuery desde su aparición. Esta librería nos simplifica enormemente nuestros desarrollos con JavaScript y los hace mucho más productivos.
Pero hasta ahora realmente no había aprovechado todo su potencial y es precisamente en esta situación cuando me ha defraudado un poco.
Me explico:
He querido tratar todo un interfaz de usuario con JQuery para optimizar la presentación y evitar las idas y venidas de la página para consultar los datos. Para eso recupero la información para rellenar un control, desde mi capa de datos utilizando un método de página y formato Json, de esta manera se evita enviar la información innecesaria de la página.
Estos datos tienen una estructura mas o menos compleja o al menos más compleja que una simple tabla, porque se tiene que representar en diferentes niveles.
-
Fechas[n]
-
Identificadores[n]
-
Propiedades[n]
-
Valor
-
-
-
Para representar estos datos correctamente en la tabla he generado unos bucles que recorren los datos y los presenta dependiendo de algunas condiciones.
No voy a poner todo mi código pero tendría más o menos este aspecto:
-
Varios bucles anidados para recorrer los registros y generar la tabla.
[sourcecode language=»javascript»]
$($("#" + tabla + " tr:first")[0].cells).each(function() {
var diaCell = this;
diaCell.innerText = result[pos].Key.charAt(0);
[/sourcecode]
-
Modificación del DOM para agregar y eliminar datos de la tabla.
[sourcecode language=»javascript»]
var rowHabitaciones = $("#" + tabla + " tr [hab]");
var reg = "<td>"+name +"</td>";
$(RowHab).after(reg);
[/sourcecode]
Todo perfecto y encantado de lo simple que me ha quedado el código de cliente que tiene que tratar tanta información.
Peroooooo!!! si hay un pero.
Al ejecutar el código está tardando mucho más de lo esperado. Llego a tardar tanto en pintar la tabla que hasta el propio explorador me avisaba de este problema.
la potencia sin control no sirve de nada !!
Tenemos que tener en cuenta que Jquery es una librería que encapsula el lenguaje JavaScript para simplificar su uso, eso significa que para nosotros recorrer el DOM es ahora mucho más fácil, pero internamente sigue ejecutando complicadas sentencias para que nuestro código funcione por ejemplo en diferentes navegadores sin problemas.
Por ese motivo tenemos que seguir unas cuantas reglas para que nuestro código sea lo más optimo posible.
Antes de la optimización de mi código he testeado la velocidad que tarda el script en representar los datos inicialmente.
Primera prueba sin optimizar: 17,366 segundos !!!!!
Realmente es impensable tener un script que tarde 17 segundos en pintar una tabla en el cliente.
Ahora voy a seguir unas simples reglas para el uso adecuado de Jquery haber si realmente ganamos algo en eficacia.
-
Iteraciones: Es recomendable utilizar en lo posible las funciones nativas del navegador y evitar utilizar directamente los objetos del DOM en estas. Es más preferible utilizar texto y añadir este al final de la iteración.
-
Añadir elementos al DOM: Siguiendo el anterior consejo, si tenemos que agregar una gran cantidad de objetos al DOM, es mejor añadir todos los objetos de una vez que irlos añadiendo progresivamente.
-
NO abusar de los selectores: Es muy fácil abusar de los selectores por su gran potencia. Utilizar variables con los resultados de los selectores para su reutilización.
Muchos más consejos en improve-your-jquery-25-excellent-tips.aspx
Después de limpiar, reorganizar, no abusar de los objetos DOM y utilizar for en decremento de los cómodos each este es el resultado.
Segunda prueba con el código optimizado: 0,361 segundos !!!!!
Realmente si cuidamos un poco la forma de utilizar Jquery sumado con el clásico JavaScript podemos tener un código mucho más optimizado para utilizar con nuestro interfaces de usuario.
Yo al menos en esta práctica me he ahorrado 17 segundos ni más ni menos y mi control está funcionando al 100%.