Ardilla Quio Ardilla Quio

07 de Febrero de 2012

jQuery, optimizando para aumentar el rendimiento: los selectores

En este artículo veremos algunos consejos para aumentar el rendimiento y la velocidad de ejecución del código jQuery. En este primer artículo vamos a centrarnos en los selectores. Aunque para la mayoría de proyectos es innecesario preocuparse de la optimización, ya que el beneficio que se obtiene es ínfimo, para algunos proyectos en los que se hace un uso intensivo de javascript, unos milisegundos en cada acción pueden suponer una gran diferencia. Además, si bien la mejora no justifica rehacer el código de proyectos antiguos, siempre podemos realizar los nuevos siguiendo estas pautas.

Optimiza los selectores

No todos los selectores de jQuery son igual de rápidos. Mientras que un selector del tipo $("#id") es muy rápido porque utiliza la función nativa document.getElementbyId(), otros selectores son mucho más lentos. Veámoslos por orden de velocidad (de más rápido a más lento):

  1. $("#id"): el más rápido. Siempre que sea posible debería usarse este tipo de selector.
  2. $("div"), $("p"), ...: este selector es bastante rápido porque utiliza la función nativa document.getElementsByTagname().
  3. $(".clase"): este método es moderadamente rápido en navegadores modernos, ya que utiliza la función document.getElementsByClassName(). Pero en navegadores antiguos (incluidos los Internet Explorer anteriores al 9) es bastante lento.
  4. $("[attributo=valor]"): la búsqueda por atributos es muy lenta ya que jQuery tiene que recorrer todo el DOM buscando coincidencias.
  5. $(":visible"), $(":hidden"), ...: estos selectores son los más lentos ya que jQuery tiene que recorrer todo el DOM y ejecutar el selector con cada uno de los elementos.

Podemos comparar las diferencias de rendimiento entre selectores en jsPerf.

Añade contexto al selector

Siempre que sea posible, deberemos añadir contexto al selector usado. Es decir, en lugar de usar este selector: $("a") deberíamos intentar usar el selector a partir de un id: $("a", "#id"); además, a partir de que tenemos contexto, las siguientes son las distintas formas de hacer lo mismo, de más rápida a más lenta:

  1. $("#id").find("a")
  2. $("a", $("#id"))
  3. $("a", "#id")
  4. $("a")
  5. $("#id").children("a")
  6. $("#list > a")
  7. $("#list a")

Comparación de velocidad entre selectores con diferentes contextos en jsPerf.

En algunos artículos se recomienda que al usar el selector "clase" se añada la etiqueta del elemento HTML de esta forma: $("div.clase"). Esto es más rápido en navegadores antiguos (Internet Explorer anteriores al 9), pero es contraproducente en navegadores modernos. Podemos ver en esta discusión sobre la forma más eficiente de encontrar elementos en jQuery como la respuesta aceptada ha cambiado con el tiempo.

Utiliza selectores simples

No especifiques demasiado tus selectores. Intenta mantenerlos lo más simples posibles. Este tipo de código no es necesario:

$("body > article section#comments label")

Es más rápido si lo hacemos de esta forma:

$("#comments").find("label")

Comparemos las diferencias de rendimiento entre selectores simples y complejos en jsPerf.

Evita el selector universal: *

El selector universal es muy lento ya que implica utilizar todos los elementos del DOM. Debe evitarse su uso, tanto de forma explícita: $("#id > *"), como implícita: $(":radio") (esto es igual a $("*:radio")). Las alternativas más rápidas serían, para el caso explícito: $("#id").children(); para el caso implícito: $("input:radio") (o mejor $("input[type=radio]")).

Podemos comprobar las diferencias de rendimiento del selector universal en jsPerf.

Utiliza funciones en lugar de selectores lentos

Algunos selectores son muy lentos (pseudo selectores, selector universal, ...). Es mejor utilizar funciones de jQuery que utilizar estos selectores. Veamos algunos ejemplos:

$("div:first")
$("div:eq(0)")
$("div > *")

Todas estas instrucciones serían más rápidas escritas de esta forma:

$("div").first()
$("div").eq(0)
$("div").children()

Podemos comprobar las diferencias de rendimiento entre selectores lentos y funciones en jsPerf.

Puedes leer más sobre este tema en nuestro artículo jQuery, optimizando para aumentar el rendimiento: varios.

1 comentarios

Ozkar Bravo

09/08/2013 05:32:13

Excelente aporte muchas gracias. felicidades por su trabajo.

aqui hay otro post que talvez les interese leer:

http://quechuletas.blogspot.mx/2013/06/selectores-en-jque...

Comentario anónimo
Comentar como usuario