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

jQuery, optimizando para aumentar el rendimiento: uso excesivo

04 May 2012 por Luis

Comentarios: 2

jQuery

Tras los artículos sobre cómo optimizar los selectores en jQuery, otras formas de optimizar jQuery y optimizar la manipulación del DOM con jQuery, en este artículo, último de esta serie, vamos a tratar técnicas de optimización que se basan en no usar jQuery más de lo necesario, ya que utilizar simple javascript es mucho más rápido, así como técnicas para evitar que jQuery ejecute funciones de forma innecesaria.

A veces nos olvidamos que jQuery está escrito en javascript y que no siempre es necesario usar sus funciones para hacer algunas cosas. Otras veces, abusamos de la capacidad de jQuery de no provocar errores y ejecutamos funciones sobre elementos que no existen. Algunos de estos tipos de usos excesivos son los que detallaremos a continuación.

No crees objetos jQuery innecesarios

Muchas veces generamos objetos jQuery para cosas que podríamos realizar con el elemento DOM de forma mucho más rápida. Así, por ejemplo, lo normal es encontrar código como éste:

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

En este caso, como vemos, generamos un nuevo objeto jQuery: $(this), cuando podríamos haber usado el elemento DOM this de esta forma:

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

Podemos comparar la diferencia de rendimiento entre usar un objeto jQuery y un objeto DOM en jsPerf.

Hay que tener en cuenta que que hay tres atributos a los que siempre se debe acceder a través de jQuery: src, href y style. A estos atributos no se puede acceder directamente en las versiones antiguas de IE.

No abuses de each()

La función each() sirve para recorrer uno por uno los elementos de una colección (normalmente el resultado de un selector jQuery, pero también pueden ser otras colecciones como un array o un objeto) y ejecutar para cada uno la función que le pasamos como parámetro.

Es evidente que la función puede ser muy útil, por ejemplo:

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

Sin embargo, esta función es muy lenta y este mismo ejemplo podríamos hacerlo más rápido utilizando simple javascript de esta forma:

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

La función each() nos da algunas ventajas, pero si no vamos a necesitarlas, mejor usar los bucles de javascript: for() o while().

Podemos comparar la diferencia de rendimiento entre each() y while() en jsPerf.

No actúes sobre elementos que no existen

Como jQuery no da ningún tipo de error si actuamos sobre elementos que no existen, tendemos a desentendernos de comprobar si tenemos o no resultados antes de ejecutar cualquier acción sobre ellos. Por ejemplo, es común ver código como este:

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

Si #elemento no existe, jQuery parece no hacer nada y continuar la ejecución del código. Sin embargo esto no es así. Este código ejecuta hasta cuatro funciones a las que se les pasa una lista de elementos vacía. Para evitarlo, debemos comprobar si tenemos o no elementos sobre los que actuar con la propiedad length:

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

Comentarios

2 comentarios. Comentar.

1. Necky el 20 Sep 2012 a las 17:32:40

Mejor todavía

var el = $("#elemento");

if (el)

{

el.slideUp();

}

2. Luis el 21 Sep 2012 a las 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

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?