Em jQuery, está selecionando por class ou id mais rápido que selecionando por algum outro atributo?

Basicamente, é

$("#someid") 

ou

 $(".someclass") 

mais rápido que

 $("[someattr='value']") 

Eu imagino que é (isto é, a seleção por id é mais rápida, então a class, então o atributo), mas alguém sabe ao certo?

ID é absolutamente o mais rápido. Parte do motivo é que o ID deve ser exclusivo, então a API pára de pesquisar depois que o ID é encontrado no DOM.

Se você precisar usar um seletor de class ou atributo, poderá melhorar o desempenho especificando o parâmetro de contexto opcional.

Por exemplo…

 $(".someclass", "#somecontainer") 

Onde somecontainer é algo como um div, cercando um elemento com class someclass . Isso pode oferecer um enorme benefício de desempenho nos casos em que o somecontainer inclui uma pequena fração do DOM.


ATUALIZAR:

Eu fiz alguns testes alguns anos atrás em torno do parâmetro de contexto. Depois de ler os comentários abaixo, fiquei curioso se alguma coisa mudou. De fato, parece que a cena mudou um pouco com os navegadores de hoje. Talvez também tenha a ver com melhorias no jQuery? Eu não sei.

Aqui estão os meus resultados com 10.000 iterações (o código está abaixo):

IE9

$(".someclass") – 2793 ms

$(".someclass", "#somecontainer") – 1481 ms

Chrome 12

$(".someclass") – 75 ms

$(".someclass", "#somecontainer") – 104 ms

Firefox 3.6

$(".someclass") – 308 ms

$(".someclass", "#somecontainer") – 357 ms

Portanto, entre esses três grandes navegadores modernos, o parâmetro de contexto parece apenas ajudar o IE9. Os navegadores mais antigos também se beneficiarão do parâmetro de contexto. Mas considerando a prevalência de cada um desses navegadores e calculando a média de tudo, o ganho líquido é um pouco de uma lavagem agora.

E aqui está o código no caso de alguém querer experimentá-lo …

       

jQuery Selector Performance: Context vs No Context

$(".someclass")

--- ms

$(".someclass", "#somecontainer")

--- ms


a

b

c

a

b

c

a

b

c

a

b

c

a

b

c

a

b

c

someclass

a

b

c

a

b

c

a

b

c

a

b

c

a

b

c

Selecionando por ID é o mais rápido, porque mapeia diretamente para getElementByID, o outro 2 tem que verificar cada elemento para determinar os elementos selecionados.

Se você precisar selecionar usando class ou atributo, tente include a pesquisa em um ID. ex.

 $("#someid .someclass") 

ID é único e se você quiser apenas selecionar um / primeiro elemento aqui, o equivalente

$ (“# someid”) => 75.695 operações / seg, mais rápido

$ (. unique_class ‘) => 45,257 ops / seg, 40% mais lenta: apenas uma aula na página

$ (“. someclass”). first () => 42.217 ops / seg, 46% mais lento: várias classs na página, selecione primeiro elemento

$ (“. someclass: eq (0)”) => 18.324 ops / seg, 76% mais lento: várias classs na página, selecione o elemento no índice selecionado

URL de teste: http://jsperf.com/jquery-selector-speed-tests/98

Os seletores de ID e de class, pelo menos quando usados ​​sozinhos, tendem a ser mais rápidos, seja para jQuery ou para CSS. Isso se deve em grande parte ao fato de que os navegadores otimizaram os algoritmos para IDs e classs em seus mecanismos DOM / CSS.

Nos navegadores modernos com versões recentes do jQuery, qualquer sequência de seletores que seja entendida como seletores CSS suportados por um navegador será manipulada pelo document.querySelectorAll() , oferecendo desempenho máximo, desde que os seletores CSS padrão sejam usados. Seletores não-padrão ou navegadores mais antigos são atendidos pelo jQuery e / ou pela biblioteca Sizzle, que fazem o melhor para usar os methods get element (elementos) do DOM para atravessar o DOM.

A coisa mais importante a lembrar é que o desempenho varia de navegador (versão) para navegador (versão) por causa de diferentes implementações DOM. Pelo menos, é assim que acredito que as coisas são.

O id será sempre mais rápido, pois é único na página. A class “pode” ser mais rápida que um atributo, mas depende disso.

O kicker real aqui é a seleção de uma class dentro e ID não pode ser mais rápido do que apenas a seleção da class. Isso dependerá da página e do navegador. No meu teste, seleção de uma página complexa com um número limitado de elementos com uma “class” onde o pai do elemento de class tinha um id como:

 
stuff
stuff

um seletor como $('.iamin','#iamout') nem sempre foi tão rápido quanto $('.iamin')

Nem todos os navegadores suportam selecionar por nome de class (nativamente), mas os modernos / mais novos fazem e, portanto, podem oferecer melhor desempenho, dependendo de qual navegador você possui.

Se você precisa ter um desempenho ideal, precisará testar sua página exata.

Id é mais rápido, porque é o único elemento que pode ter esse identificador. Muitos objects podem ter o mesmo nome de class. Alguém poderia verificar isso, mas parece que o documento não precisaria ser mais explorado depois que o ID fosse encontrado. Para as aulas isso pode não ser o caso? HTH