¿Te gustaría aprender a WordPress?
Tenemos los gurudays que necesitas.¡Haz clic aquí!
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.
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();
}Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
