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: uso excesivo

jQuery, optimizando para aumentar o rendemento: uso excesivo

04 Mai 2012 por Luis

Comentarios: 2

jQuery

Tras os artigos sobre como optimizar os selectores en jQuery, outras formas de optimizar jQuery e optimizar a manipulación do DOM con jQuery, neste artigo, último desta serie, imos tratar técnicas de optimización que se basean en non usar jQuery máis do necesario, xa que utilizar simple javascript é moito máis rápido, así como técnicas para evitar que jQuery execute funcións de forma innecesaria.

Ás veces esquecémonos que jQuery está escrito en javascript e que non sempre é necesario usar as súas funcións para facer algunhas cousas. Outras veces, abusamos da capacidade de jQuery de non provocar erros e executamos funcións sobre elementos que non existen. Algúns destes tipos de usos excesivos son os que detallaremos a continuación.

Non cres obxectos jQuery innecesarios

Moitas veces xeramos obxectos jQuery para cousas que poderiamos realizar co elemento DOM de forma moito máis rápida. Así, por exemplo, o normal é atopar código como este:

$("p").each(function()
{
	var t = $(this).attr("id");
});

Neste caso, como vemos, xeramos un novo obxecto jQuery: $(this), cando poderiamos usar o elemento DOM this desta forma:

$("p").each(function()
{
	var t = this.id;
});

Podemos comparar a diferenza de rendemento entre usar un obxecto jQuery e un obxecto DOM en jsPerf.

Hai que ter en conta que que hai tres atributos ós que sempre se debe acceder a través de jQuery: src, href e style. A estes atributos non se pode acceder directamente nas versións antigas de IE.

Non abuses de each()

A función each() serve para percorrer un por un os elementos dunha colección (normalmente o resultado dun selector jQuery, pero tamén poden ser outras coleccións como un array ou un obxecto) e executar para cada un a función que lle pasamos como parámetro.

É evidente que a función pode ser moi útil, por exemplo:

var str = "";
var list = $("#list > li");
list.each(function()
{
	str += $(this).text();
});

Con todo, esta función é moi lenta e este mesmo exemplo poderiamos facelo máis rápido utilizando simple javascript desta forma:

var str = "";
var list = $("#list > li");
var i = 0;
var il = list.length;
while (i < il)
{
	str += list[i].innerText;
	++i;
}

A función each() dános algunhas vantaxes, pero se non imos necesitalas, mellor usar os bucles de javascript: for() ou while().

Podemos comparar a diferenza de rendemento entre each() e while() en jsPerf.

Non actúes sobre elementos que non existen

Como jQuery non dá ningún tipo de erro se actuamos sobre elementos que non existen, tendemos a desentendernos de comprobar se temos ou non resultados antes de executar calquera acción sobre eles. Por exemplo, é común ver código como este:

$("#elemento").slideUp();

Se #elemento non existe, jQuery parece non facer nada e continuar a execución do código. Con todo isto non é así. Este código executa ata catro funcións ás que se lles pasa unha lista de elementos baleira. Para evitalo, debemos comprobar se temos ou non elementos sobre os que actuar coa propiedade length:

var el = $("#elemento");
if (el.length)
{
	el.slideUp();
}

Comentarios

2 comentarios. Comentar.

1. Necky o 20 Set 2012 ás 17:32:40

Mejor todavía

var el = $("#elemento");

if (el)

{

el.slideUp();

}

2. Luis o 21 Set 2012 ás 19:10:40

Hola Necky.

Lo que dices no está bien. La función $() de jQuery siempre devuelve un objeto, aunque sea un objeto vacío si no encuentra lo que se busca. Por eso, "if (el)" siempre devolverá "true", aunque no encuentre ningún $("#elemento").

Puedes ver una explicación (en inglés) aquí:

http://aaronrussell.co.uk/legacy/check-if-an-element-exis...

Un saludo y gracias por participar en el blog.

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?