Hace tiempo escribí un artículo hablando de rendimiento de jQuery y el uso de selectores dobles con jQuery, pero lo que no he hecho es explicar como funciona un selector de jQuery. La idea es que esto no sea "la guía definitiva de jQuery", ni nada por el estilo, sino un breve apunte para los lectores, la visión mas básica del uso de jQuery.

En este artículo voy a exponer como seleccionar de forma mas que simple utilizando un tag (etiqueta de html), una clase de css y un id. jQuery es un ente muy inteligente y por tanto, sabrá si lo que le estamos pidiendo es que convierta una etiqueta a jQuery o que la busque.

• Buscar por tag con jQuery: este junto con el de clase, son métodos de búsqueda de poco rendimiento y que pueden dar como resultado varios objetos (ya que un tag se puede repetir), se indicaría a jQuery el nombre del tag.
• Buscar por clase con jQuery: al igual que el anterior, es de bajo rendimiento y dará como resultado un array de objetos, ya que una clase se puede repetir.
• Buscar por id con jQuery: es el mas optimo y el que se ha de usar siempre que sea posible. Devolverá un único objeto ya que los id's en teoría no se repiten.

Ahora vista un poco la teoría viene la practica. Lo primero es entender como se hace la llamada a jQuery, que tiene 2 formas, la original que es usando la función jQuery o la corta que es usando su alias a la función $. Veamos un ejemplo genérico de esto y luego uno por cada selector.

var selectorjQuery = jQuery("#mi_id_a_seleccionar");
var selectorAlias = $("#mi_id_a_seleccionar");

En el ejemplo anterior, el resultado sería el mismo, ya que es similar utilizar la función jQuery que la función $. Ahora veamos un ejemplo con los selectores, con un código en html y otro de código javascript.

<p>
   <a href="#">Mi link 1</a>
   <a href="#" class="enlace">Mi link 2</a>
   <a href="#" class="enlace" id="myLink">Mi link 3</a>
</p>

Ahora vamos a hacer lo siguiente, con estos enlaces, vamos a poner el color del enlace en negro para todos los enlaces, rojo para los enlaces que tienen una clase enlace y azul para el id myLink

//ponemos todos los enlaces a negro
$("a").css("color", "#000");
//los enlaces con la clase .enlace los dejamos en rojo
$(".enlace").css("color", "#ff0000");
//el enlace con el id myLink lo ponemos azulado
$("#myLink").css("color", "#336699");

Como podemos observar, las etiquetas se indican con su nombre, las clases como si de css se tratase, con un punto delante, al igual que los ids, que al igual que css utilizan una almohadilla.

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.

A menudo suele pasar que al comparar diferentes librerías de Javascript, se habla de JQuery como una librería de muy fácil manejo por utilizar selectores DOM y de CSS pero a la vez se dice que por esto es mas lenta que el resto. Mi objetivo con este artículo no es explicar los diferentes tipos de selectores de JQuery sino como aumentar el rendimiento de JQuery utilizando selectores dobles de contexto.

En JQuery aparte de otras formas como objetos DOM y similares, lo normal es realizar un selector apuntando a una clase de CSS o un id. Antes de nada, comentar que el uso de clases en los selectores de JQuery, es recomendable omitirlo siempre que sea posible (no siempre se puede), ya que JQuery espera encontrar varios nodos y por tanto evaluará todo el código, por lo que es mas lento que utilizar ids, que una vez lo encuentre, dejará de buscar. Tras este miniconsejo de rendimiento de JQuery, me gustaría comentar como funcionan los selectores dobles de contexto de JQuery.

Normalmente  para hacer una selección en JQuery, hacemos algo tal que $("selector") y seleccionamos el objeto de JQuery. Un selector doble o selector de contexto es básicamente una especie de cache, un contexto donde buscar ese selector pero no en toda la página, sino en una parte de esta. Para utilizar un selector doble o selector de contexto, lo que hacemos es enviarle un parámetro extra a la consulta de selección. En mi caso me gusta enviar un objeto de JQuery que intento cargar en memoria al cargar la página, sacrificando tiempo de carga por velocidad a la hora de interactuar con la propia página. Para utilizar un selector doble o selector de conexto lo que hacemos es por ejemplo hacer $("selector", objetopreseleccionado), de esta forma, JQuery no buscará el selector en toda la página, sino que se centrará en el contexto donde se encuentra lo preseleccionado.

Para que todo quede un poco mas claro, voy a poner un ejemplo, partamos de la idea que tenemos la página partida en 4 sectores, una cabecera, un contenido dividido en menú lateral y contenido en si, y un pie. Todas estas partes cambiarán dinámicamente, así que al realizar el document ready cargaremos en variables las diferentes secciones de la web con la idea de realizar operaciones de una forma mas rápida y consumiendo menos recursos de procesador al cliente, que ya sabemos que el javascript puede ralentizar mucho una página si no se hace con cuidado.

var header, footer, menu, content;
 
$(document).ready(function($) {
  header = $("#header");
  footer = $("#footer");
  menu = $("#menu");
  content = $("#content");
}

Una vez que hemos cargado en memoria las diferentes secciones de la web, podremos trabajar con eventos, modificaciones y efectos de una manera mucho mas eficiente, realizando las llamadas utilizando en los selectores esas variables como contexto de JQuery.

$("#logo", header).html("mi html");
$(".article a", content).click(function() { .... });

Si utilizamos los selectores de JQuery como en el ejemplo anterior, usando un contexto para la búsqueda, ahorraremos muchísimo tiempo de proceso porque JQuery no tendrá que buscar en todo el documento, sino que lo realizará en base al contexto que le indiquemos. Quiero aclarar que como todo, hay que estudiar cuando usar o no usar contextos, ya que si la página es muy pequeña no merece la pena cargar en memoria las diferentes secciones, pero si la página es bastante grande y con muchos datos, podemos acelerar el uso de JQuery y aumentar el rendimiento de JQuery en un 250%.

En la mayoría de lenguajes de programación relativamente maduros o potentes, existe lo que denominamos namespace o espacio de nombres. Los namespace no son otra cosa que unos contenedores de nombre donde podremos contener clases, funciones y variables que pueden repetirse con el mismo nombre en otros espacios de nombre o namespace sin que ello suponga un error. Un ejemplo claro de cual es la verdadera utilidad organizadora de los namespace o espacios de nombres es en las librerías gráficas de los lenguajes de programación, ya que en estas librerías un elemento muy común suele ser la clase Window que hace referencia a una ventana pero que puede estar dentro de GTK, QT, .Net, API de Windows, etc. (esto no es muy correcto puesto que GTK seria GTKWindow pero es por poner un ejemplo). Javascript, como un lenguaje ya mas que maduro con el paso de los años y relativamente estandarizado por los navegadores modernos, pese a ser un lenguaje de programación multiparadigma, al igual que haga PHP, también tiene namespaces o espacios de nombre, aunque debido a la debilidad de las variables estos namespaces son mas virtuales que reales.

Entendiendo que es y para que sirve un namespace, para declararlo en javascript, lo que debemos de hacer es utilizar arrays para generarlo. Gracias a la debilidad y dinamismo de las variables en javascript, podemos asignar a una variable un array de posiciones por nombre y acceder a estas mediante un signo de puntuación "." y no por su clave común de array ["clave"], por lo que aquí es donde viene el truco. Básicamente lo que hacemos al declarar un namespace en javascript es asignar a un variable un array con las posiciones del namespace y luego ya dentro de estas posiciones, acceder como si desde .Net o Java se tratase. Con un ejemplo se ve mas sencillo.

var Indalcasa = { Utilidades : {} };
 
Indalcasa.Utilidades.MiClase = function() {
  this.variable = "valor";
 
  this.metodo = function(parametros) {
    return this.variable + " " + parametros;
  }
};
 
var iClase = new Indalcasa.Utilidades.MiClase();
iClase.variable = "nuevo valor";
alert(iClase.metodo("prueba"));

El ejemplo anterior mostrará una ventana de alert con un mensaje tal que "nuevo valor prueba", ya que hemos instanciado la clase, le hemos cambiado el valor al atributo de la clase y en el método de la clase, concatenamos el valor del atributo de la clase al parámetros que hemos pasado. Esto es un pequeño y sencillo ejemplo de lo que se puede hacer con javascript, namespaces y clases.

Cuando escribimos un texto en un input de tipo text (input type="text") nos encontramos que por regla general el navegador nos va a autocompletar lo que estemos escribiendo en ese momento con texto que ya hayamos escrito con anterioridad, recordando para un input que se llama "nombre" el o los nombres que hayamos introducido.

La practica del autocompletado es muy util siempre que tengamos formularios repetitivos, tales como los formularios de registro que suelen llamarse siempre de forma similar y siempre suelen pedir los mismos datos, evitandonos volver a escribir todos nuestros datos una y otra vez.

Existen casos en los que quizas no queramos que el navegador nos autocomplete ese texto, puede darse el caso que tengamos una tienda online que realiza el pago con tarjeta de crédito y no queramos que esa tarjeta de crédito se nos autocomplete. Para evitar esto, existe un atributo que es utilizado por la gran mayoria de los navegadores que es el atributo autocomplete="on|off", que si se desactiva con el valor off, indica al navegador que no ha de autocompletar ese campo.

Aunque en muchos casos es muy buena practica usar el atributo autocomplete, el W3C no tiene reconocido este atributo como atributo de la etiqueta input, con lo cual al intentar validar y encontrarse con el atributo autocomplete, nos dara un error de validación. Para solucionar el error de validación lo que haremos sera utilizar javascript para añadir este atributo, así la funcionalidad seguira estando ahí, pero no tendremos problemas de validación.

Lo unico que deberemos hacer es añadir el siguiente código al final de la página, o al menos, justo despues de declarar el input

  <script type="text/javascript">
    //<![CDATA[
    var elemento = document.getElementById("IdDelInput")
    elemento.setAttribute("autocomplete", "off");
    //]]&gt;
  </script>

De esta forma conseguiremos que al introducir un texto en un input no se autocomplete por el navegador y si queremos autocompletar lo podamos hacer por javascript.

Un buen y bonito ejemplo de autocompletado de campos es el que use para muchoviaje en los campos de origen y destino

Aunque hoy en día y gracias a Ajax, no soy partidario de usar iframes, aunque en un proyecto en el cual por temas de tiempo, no podía hacerlo con ajax, tuve que conformarme con usar iframes. Durante el desarrollo, me encontre con un problema, que aunque pueda resultar una tontería, siempre viene bien tenerlo apuntado.

Cuando desde un iframe, queremos llamar a una función, que hemos declarado en la página padre, o página que tiene el código <iframe>, solamente deberemos de añadir window.parent, antes del nombre de la función, quedado la sintaxis así:

  window.parent.function(parametros)

En muchas ocasiones he escrito código Javascript en una web de XHTML y al intentar validar unas veces funcionaba y otras no. Probando un poco más me di cuenta que cuando escribía código Javascript con ampersans (&) y signos de menor o mayor (< >) el código no validaba. Es cuando caigo en la solución, si XHTML no deja de ser un XML, probemos a poner un CDATA.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
dir="ltr" lang="es-ES">
....
....
<script type="text/javascript">
//<![CDATA[
//Aquí metemos nuestro codigo javascript
//]]>
</script>

Con esto ya podemos escribir código Javascript embebido sin que por ello no nos valide nuestra web.