Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

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

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • jQuery, optimizando para aumentar o rendemento: varios

jQuery, optimizando para aumentar o rendemento: varios

06 Mar 2012 por Luis

Comentarios: 0

jQuery

Nun artigo anterior vimos como optimizar os selectores en jQuery para conseguir un mellor rendemento do noso código. Neste artigo veremos varias técnicas que perseguen o mesmo obxectivo.

Como se explica no anterior artigo, para a maioría de proxectos é innecesario preocuparse da optimización aínda que, se ben a mellora non xustifica refacer o código de proxectos antigos, sempre podemos realizar os novos seguindo estas pautas. Ademais, algunhas das técnicas que se explican neste artigo, si poden supor unha gran mellora nos tempos.

Encadeamento

Case todos os métodos devolven un obxecto jQuery e soportan encadeamento. Desta forma, unha vez executado un método, jQuery continúa executando o seguinte. Máis rápido e menos bytes. Por exemplo:

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

Con encadeamento:

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

Caché

Se imos utilizar unha selección en máis dunha ocasión, debemos gardar a selección nunha variable local. Facer unha mesma selección unha e outra vez fai que se teña que percorrer o DOM cada vez que a usamos. Isto é especialmente importante nos bucles. Por exemplo:

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

Debería facerse así:

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

Podemos comparar as diferenzas de rendemento entre usar caché ou seleccionar de novo nun bucle así como diferenzas de rendemento entre usar encadeamento, caché ou seleccionar de novo en jsPerf.

Delegación de eventos

Utilizar a delegación de eventos é moito máis rápido que percorrer varios elementos do DOM e asociar un evento a cada un. Falamos da delegación de eventos en jQuery nun artigo anterior. Por exemplo:

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

Debería facerse así:

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

Podemos comprobar as diferenzas de rendemento entre asociar eventos directamente e delegación de eventos en jsPerf.

Hai que ter en conta que puxemos td como un selector da función on. Con isto o que facemos é asociar un só evento a table e disparalo en cada td.

Estilos en liña

Debemos evitar na medida do posible modificar os estilos dos elementos con jQuery. Sempre que sexa posible, debemos utilizar clases para modificar os estilos. Con isto, o código será máis rápido e moito máis fácil de manter. Por exemplo:

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

Sería mellor usar unha clase:

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

Podemos comprobar as diferenzas de rendemento entre usar estilos e clases en jsPerf.

Podes ler máis sobre este tema no noso artigo jQuery, optimizando para aumentar o rendemento: o DOM.

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?