Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • jQuery, optimizando para aumentar el rendimiento: los selectores

jQuery, optimizando para aumentar el rendimiento: los selectores

07 Feb 2012 por Luis

Comentarios: 1

jQuery

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.

Comentarios

1 comentarios. Comentar.

1. Ozkar Bravo el 09 Ago 2013 a las 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...

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?