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%.