Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

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

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • jQuery, optimizando para aumentar o rendemento: os selectores

jQuery, optimizando para aumentar o rendemento: os selectores

07 Feb 2012 por Luis

Comentarios: 1

jQuery

Neste artigo veremos algúns consellos para aumentar o rendemento e a velocidade de execución do código jQuery. Neste primeiro artigo imos centrarnos nos selectores. Aínda que para a maioría de proxectos é innecesario preocuparse da optimización, xa que o beneficio que se obtén é ínfimo, para algúns proxectos nos que se fai un uso intensivo de javascript, uns milisegundos en cada acción poden supor unha gran diferenza. Ademais, aínda que a mellora non xustifica refacer o código de proxectos antigos, sempre podemos realizar os novos seguindo estas pautas.

Optimiza os selectores

Non todos os selectores de jQuery son igual de rápidos. Mentres que un selector do tipo $("#id") é moi rápido porque utiliza a función nativa document.getElementbyId(), outros selectores son moito máis lentos. Vexámolos por orde de velocidade (de máis rápido a máis lento):

  1. $("#id"): o máis rápido. Sempre que sexa posible debería usarse este tipo de selector.
  2. $("div"), $("p"), ...: este selector é bastante rápido porque utiliza a función nativa document.getElementsByTagname().
  3. $(".clase"): este método é moderadamente rápido en navegadores modernos, xa que utiliza a función document.getElementsByClassName(). Pero en navegadores antigos (incluídos os Internet Explorer anteriores ó 9) é bastante lento.
  4. $("[attributo=valor]"): a procura por atributos é moi lenta xa que jQuery ten que percorrer todo o DOM buscando coincidencias.
  5. $(":visible"), $(":hidden"), ...: estos selectores son os máis lentos xa que jQuery ten que percorrer todo o DOM e executar o selector con cada un dos elementos.

Podemos comparar as diferenzas de rendemento entre selectores en jsPerf.

Engade contexto ó selector

Sempre que sexa posible, deberemos engadir contexto ó selector usado. É dicir, en lugar de usar este selector: $("a") deberiamos intentar usar o selector a partir dun id: $("a", "#id"); ademais, a partir de que temos contexto, as seguintes son as distintas formas de facer o mesmo, de máis rápida a máis 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 velocidade entre selectores con diferentes contextos en jsPerf.

Nalgúns artigos recoméndase que ó usar o selector "clase" se engada a etiqueta do elemento HTML desta forma: $("div.clase"). Isto é máis rápido en navegadores antigos (Internet Explorer anteriores ó 9), pero é contraproducente en navegadores modernos. Podemos ver nesta discusión sobre a forma máis eficiente de atopar elementos en jQuery como a resposta aceptada cambiou co tempo.

Utiliza selectores simples

Non especifiques demasiado os teus selectores. Intenta mantelos o máis simples posibles. Este tipo de código non é necesario:

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

É máis rápido se o facemos desta forma:

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

Comparemos as diferenzas de rendemento entre selectores simples e complexos en jsPerf.

Evita o selector universal: *

O selector universal é moi lento xa que implica utilizar todos os elementos do DOM. Debe evitarse o seu uso, tanto de forma explícita: $("#id > *"), como implícita: $(":radio") (isto é igual a $("*:radio")). As alternativas máis rápidas serían, para o caso explícito: $("#id").children(); para o caso implícito: $("input:radio") (ou mellor $("input[type=radio]")).

Podemos comprobar as diferenzas de rendemento do selector universal en jsPerf.

Utiliza funcións en lugar de selectores lentos

Algúns selectores son moi lentos (pseudo selectores, selector universal, ...). É mellor utilizar funcións de jQuery que utilizar estes selectores. Vexamos algúns exemplos:

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

Todas estas instrucións serían máis rápidas escritas desta forma:

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

Podemos comprobar as diferenzas de rendemento entre selectores lentos e funcións en jsPerf.

Podes ler máis sobre este tema no noso artigo jQuery, optimizando para aumentar o rendemento: varios.

Comentarios

1 comentarios. Comentar.

1. Ozkar Bravo o 09 Ago 2013 ás 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

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?