Guía de buenas prácticas para aumentar el rendimiento de jQuery

Llevo tiempo con ganas de escribir esta guía de buenas prácticas para aumentar el rendimiento de jQuery y de javascript en general. Uno de los principales problemas que nos encontramos por internet son que hasta hace un tiempo, cada javascript era de su padre y de su madre, por lo que perdía importancia dentro del desarrollo web y no optimizando esta parte del código. Con la inclusión de nuevas ideas a la hora de desarrollar webs y la aparición de multitud de frameworks como jQuery, mootools, sproutcore, hacen que el código javascript que escriben los desarrolladores, funcione en todos o casi todos los navegadores, pero aún así, algo falla.

Aunque ya no es como pasaba antiguamente que al entrar en una web o tenías Internet Explorer o podías olvidarte del javascript y por tanto de una gran parte de funcionalidad en la web, hoy en día esto no pasa gracias a los frameworks de javascript, es cierto que hay un problema y es el rendimiento. En este artículo me quiero centrar en el framework mas extendido, que es jQuery y una breve guía de como aumentar el rendimiento de jQuery y por tanto aumentar el rendimiento de javascript.

A continuación, detallo un listado de buenas practicas para aumentar el rendimiento de jQuery.

1. Acceder a id’s y no a clases

Cuando vemos algun ejemplo de jQuery, siempre se nos muestra con $(«.clase»).html(«prueba»), esto es un ejemplo que nos lleva a cometer grandes faltas de rendimiento cuando trabajamos con un proyecto muy grande. Aunque a veces no nos queda mas remedio que acceder a clases, su uso dentro de los selectores de jQuery, debemos de evitarlo siempre que podamos, ya que al acceder por clase, jQuery buscará en todo el código esa clase, todas las veces pueda, sin embargo, si utilizamos un id, al encontrar la primera coincidencia, la búsqueda parará y por tanto la ejecución será mas rápida.

$(".clase").html("prueba"); //es mas lento
$("#id").html("prueba"); //es mas rápido

2. Utilizar selectores dobles en jQuery

Hace poco tiempo escribí un artículo sobre el uso de selectores dobles para aumentar el rendimiento en jQuery. Básicamente y sin entrar mucho en detalle, ya que para ello hay ya un articulo dedicado, un selector doble lo que hace es crear un contexto donde buscar el selector. Imaginemos que queremos cambiar el html  de un menú (si es un absurdo) para ello, en lugar de ejecutar:

$(".menu").html("jodimos el menú");

Lo ideal es usar un contexto con base a un id, donde jquery tenga que buscar menos cantidad de datos

var header = $("#header");
$(".menu", header).html("jodimos el menú");

De esta forma, capturamos un contexto y le decimos a jQuery que busque solo en ese contexto en lugar de en toda la web, por lo que la ejecución de un selector de clase, será mas rápida.

3. Cachear variables que mas utilicemos y de contexto

Cuando escribimos código de jQuery, es normal que recurrentemente accedamos a ciertas partes de la página, que como hemos visto en el ejemplo anterior, utilizaríamos variables de contexto. Para agilizar la carga, es recomendable cachear estas variables, para que no tengamos que buscarlas cada vez que vayamos a utilizarlas:

var header = $("#header");
var footer = $("#footer");

.....

function bordemenu() {
    $(".menu", header).css("border", "solid 1px #000000");
}

De esta forma, no buscamos header, sino que accedemos a la misma variable que cargamos al cargar la página. Incluso, si ya sabemos de antemano que vamos a acceder muchas veces al menú, podríamos cachearlo también.

4. Evitar el uso de each

En jQuery, la función each no es más que un foreach que nos devuelve los nodos que hemos seleccionado. Es por esto que debemos de intentar, en la medida de lo posible, no utilizar este método para no ejecutar un foreach e intentar recorrer los nodos con un for, que aunque un poco mas complejo, su ejecución será mas rápida.

5. Centralizar la carga de eventos

Cuando hacemos una aplicación web muy muy grande y con mucho uso de ajax, nos damos cuenta de que cada vez tenemos mas y mas eventos y que como nos descuidemos, acabamos escribiendo casi los mismos eventos en multitud de sitios. Es por ello, que es recomendable tener una o varias funciones donde incialicemos los eventos para su carga y ejecución. Parece una tontería, pero a la larga, mas que en rendimiento, nos favorecerá en rendimiento a la hora de escalar nuestra aplicación, aunque también evitará la duplicidad de eventos sobre un mismo objeto y por tanto la ejecución será mas rápida.

Estos son 5 sencillos casos en los que podemos aumentar considerablemente la velocidad de ejecución de una web utilizando jQuery. Quizás, haciendo sencillos ejemplos, no seamos coscientes de esa diferencia de velocidad, pero en una macroaplicación que mueve multitud de datos asíncronamente, nos daremos cuenta que estas practicas agilizarán la página en general y agilizarán jQuery.

Artículos relacionados:

Selectores dobles con JQuery, aumentando el rendimiento de JQuery Buscar por tag, clase e id en jquery Video sobre el jQueryIO acerca de buenas practicas con jQuery Llamar a una función de un padre desde iframe Namespaces o espacios de nombre virtuales en javascript