Aprende algunas buenas prácticas para escribir código jQuery limpio y rápido.

Optimiza tu código de jQuery con un par de tips

Si estás buscando mejoras drásticas en la velocidad, hay algunos factores a considerar, por ejemplo:

  • Qué tan eficiente es tu código
  • Qué tan eficiente es el intérprete JS del navegador
  • Qué tan rápido es la computadora que ejecuta el código

Sin embargo, hay trucos simples que contribuyen a una mejor ejecución, incluso si son solo 100 milisegundos o más:

1. Guarda una consulta en una variable si la necesita más tarde

Supongamos que tiene un botón y es necesario aplicar algunas propiedades CSS:

$("#button").css('color','white');
$("#button").css('width','100%');
$("#button").css('background-color','green');

El ejemplo anterior ejecuta 3 veces la misma consulta al DOM buscando un botón con id 'button', a simple vista esto no es tan malo. Pero, ¿qué pasaría si ejecutas esa consulta en un bucle?

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

¡La consulta se ejecutó 100 veces! Puedes almacenar en caché la consulta antes como una buena práctica:

var list = $("#list");
for(var i = 0;i < 100;i++){
    list.append("<li>"+i+"</li>");
}

2. Cuando tu consulta use un selector de clases, asigna un área limitada para buscarla

Cuando se usa un selector de clase, es de suponer que debe seleccionar más de 1 objeto DOM como este:

$(".mydivision");

Sin embargo, es una buena práctica darle a su consulta un contexto para hacer la búsqueda rápidamente, de lo contrario jQuery buscará sobre todo el Documento buscando los objetos de nuestra clase, aplique en su lugar:

$(".mydivision","#mydivision-container");

de esta manera jQuery solo se enfocará en el contenedor dado y la consulta se ejecutará más rápido.

3. Encadena tus funciones de jQuery lo más que puedas

La ejecución de funciones sobre un selector es rápida si se ejecutan con el objeto devuelto en lugar de ejecutar otra consulta:

$("#button").css('color','white');
$("#button").addClass('greenButton');
$("#button").show('slow');

Al igual que en el primer punto mencionado, la consulta se ejecuta 3 veces, por lo que preferirá encadenar esas funciones en su lugar:

$("#button").css('color','white').addClass('greenButton').show('slow');

4. Minifica tus archivos javascript y combínalos en 1 archivo

Aumenta la velocidad de carga de tus scripts, por lo tanto le das más milisegundos a tus scripts para que se ejecuten.

5. Usa el método nativo for en vez de $ .each

Ejecute el siguiente ejemplo en la consola de su navegador.

var array = []; //Agregar una matriz con 1000 elementos
for (var i=0; i<10000; i++) {
    array[i] = 0;
}
 
console.time('nativeFor');
var l = array.length;
for (var i=0;i<l; i++) {
    array[i] = i;
}
console.timeEnd('nativeFor');
 
console.time('jqueryEach');
$.each (array, function (i) {
    array[i] = i;
});
console.timeEnd('jqueryEach');

Notarás que el nativo para es aproximadamente 5 veces más rápido que el método jQuery de cada método. Por último, te recomendamos que cargue siempre la última versión de jQuery que se puede obtener en el sitio web oficial de jQuery.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores