Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • jQuery, optimizando para aumentar el rendimiento: varios

jQuery, optimizando para aumentar el rendimiento: varios

06 Mar 2012 por Luis

Comentarios: 0

jQuery

En un artículo anterior vimos cómo optimizar los selectores en jQuery para conseguir un mejor rendimiento de nuestro código. En este artículo veremos varias técnicas que persiguen el mismo objetivo.

Como se explica en el anterior artículo, para la mayoría de proyectos es innecesario preocuparse de la optimización aunque, si bien la mejora no justifica rehacer el código de proyectos antiguos, siempre podemos realizar los nuevos siguiendo estas pautas. Además, algunas de las técnicas que se explican en este artículo, sí pueden suponer una gran mejora en los tiempos.

Encadenamiento

Casi todos los métodos devuelven un objeto jQuery y soportan encadenamiento. De esta forma, una vez ejecutado un método, jQuery continúa ejecutando el siguiente. Más rápido y menos bytes. Por ejemplo:

$("#theDiv").addClass("test");
$("#theDiv").removeClass("test");

Con encadenamiento:

$("#theDiv").addClass("test").removeClass("test");

Caché

Si vamos a utilizar una selección en más de una ocasión, debemos guardar la selección en una variable local. Hacer una misma selección una y otra vez hace que se tenga que recorrer el DOM cada vez que la usamos. Esto es especialmente importante en los bucles. Por ejemplo:

for (var i = 100; i > 0; i--)
{
	$(".list").html("Item " + i);
}

Debería hacerse así:

var list = $(".list");
for (var i = 100; i > 0; i--)
{
	list.html("Item " + i);
}

Podemos comparar las diferencias de rendimiento entre usar caché o seleccionar de nuevo en un bucle así como diferencias de rendimiento entre usar encadenamiento, caché o seleccionar de nuevo en jsPerf.

Delegación de eventos

Utilizar la delegación de eventos es mucho más rápido que recorrer varios elementos del DOM y asociar un evento a cada uno. Hemos hablado de la delegación de eventos en jQuery en un artículo anterior. Por ejemplo:

$("table").find("td").click(function() {
    $(this).toggleClass("active");
});

Debería hacerse así:

$("table").on("click", "td", function() {
    $(this).toggleClass("active");
});

Podemos comprobar las diferencias de rendimiento entre asociar eventos directamente y delegación de eventos en jsPerf.

Hay que tener en cuenta que hemos puesto td como un selector de la función on. Con esto lo que hacemos es asociar un sólo evento a table y dispararlo en cada td.

Estilos en línea

Debemos evitar en la medida de lo posible modificar los estilos de los elementos con jQuery. Siempre que sea posible, debemos utilizar clases para modificar los estilos. Con esto, el código será más rápido y mucho más fácil de mantener. Por ejemplo:

$(".test").css("display", "none");

Sería mejor usar una clase:

$(".test").addClass("s-hidden");

Podemos comprobar las diferencias de rendimiento entre usar estilos y clases en jsPerf.

Puedes leer más sobre este tema en nuestro artículo jQuery, optimizando para aumentar el rendimiento: el DOM.

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?