Saltar al contenido

Como agilizar Jquery

La llegada de jQuery ha echo que el proceso de programar con JavaScript sea muy fácil. Pero tal vez hayas notado que el hacer pequeños cambios al código puede mejorar la lectura y el rendimiento significativamente. Por eso aquí te muestro algunos consejos para acelerar tú código.

Para comenzar a hacer las pruebas primero necesitas una plataforma sólida, para esto vamos a estar usando Firebug para registrar los tiempos, para usarlo solamente tienes que ir a consola y presionar “perfilar” para comenzar a registrar y presionar otra vez “perfilar” para ver el resultado. Pero también debes agregar el script entre console.profile(); y console.profileEnd(); de esta manera:

<script>
console.profile() ;
// Aquí va el código que vas a evaluar
console.profileEnd();
</script>

Entonces Firebug te va a mostrar cuanto tiempo se tardó en realizar ciertas tareas. Las siguientes son las pruebas que debemos hacer para poder optimizar nuestro código.

Detectar la presencia de elementos

En la mayoría de los casos casi siempre se sirve un archivo JS con el script para todas tus páginas, usualmente este script ejecuta acciones para elementos no existentes en la página, esos son problemas que debes corregir, para esto simplemente basta con un IF para determinar si el elemento existe en la página y si sí existe ejecutar las acciones.

Usa selectores de manera efectiva

Aquí el mejor consejo es usar IDs en lugar de Class esto porque jQuery por default usa directamente el método getElementById y es más rápido que si lo hacemos por medio de clases, además en navegadores viejos esto puede traer problemas.

Usa selectores más específicos

Por ejemplo tenemos el siguiente selector: $("#someList .selected"); cuando jQuery busca este selector primero escanda toda la estructura DOM del documento descartando elementos que no tienen la class que se busca, y por cada clase encontrada busca si tiene el ID llamado #someList, esto lo podemos optimizar usando li.selected en lugar de .selected así acortamos el número de nodos que hay que escanear.

Evita el desperdicio de consultas

Evita obtener un mismo elemento varias veces, esto reduce el rendimiento, la mejor opción es rehusar la referencia, por ejemplo si tienes un código que como el siguiente:

$("#mainItem").hide();
$("#mainItem").val("Hello");
$("#mainItem").html("Oh, hey there!");
$("#mainItem").show();

La mejor forma de hacer es de esta forma:

$("#mainItem").hide().val("Hello").html("Oh, hey there!").show();

Pero si el elemento no es concurrente entonces puede cachearlo poniéndolo en una variable como se muestra a continuación:

var elem = $("#mainItem");

elem.hide();

//Some code
elem.val("Hello");

//More code
elem.html("Oh, hey there!");

//Even more code
elem.show();

Manipula el DOM de una forma más inteligente

Para esta prueba vamos a crear 50 elementos li y agregarlos al final de una lista, con este método toma demasiado tiempo:

var list = $("#someList");

for (var i=0; i<50; i++)
{
   list.append('<li>Item #' + i + '</li>');
}

Pero si lo hacemos de esta otra manera tomará mucho menos tiempo debido que la manipulación se hace hasta el final con todos los elementos al mismo tiempo y no de uno por uno.

var list = $("#someList");
var items = "";

for (var i=0; i<50; i++){
     items += '
	<li>Item #' + i + '</li>';
 }

list.append(items);

Ver más information en: How jQuery Beginners can Test and Improve their Code .

Si te ha interesado este artículo y deseas un apoyo o asesoría en algún requerimiento, envíame un mensaje a: (info@juliopari.com) o sino a través de Linkedin: https://www.linkedin.com/in/juliopari/

Etiquetas: