ti-enxame.com

Desempenho usando JS querySelector

Ao usar JavaScript no navegador da Web, há alguma diferença de desempenho entre os seguintes:

GetElementById existente

document.getElementById("elem");

Seletor de consultas usando #id

document.querySelector("#elem");

Seletor de consultas usando [id = elem]

document.querySelector("[id=elem]");

Suponho que o primeiro seja o mais rápido (apenas é necessário procurar elementos com um ID). Além disso, o último parece uma má prática. Eu gosto do segundo porque usar querySelector para tudo torna o código fácil de ler.

Alguma sugestão?

23
Rob Farr

Primeiramente,

document.querySelector("#elem");

Tem uma vantagem no fato de que, diferentemente de document.getElementId, ele pode retornar classes. No entanto, a utilidade disso é muito reduzida pelo fato de ele retornar apenas o primeiro objeto com esse nome de classe; portanto, você também pode usar um ID se não estiver procurando especificamente o primeiro objeto com esse nome de classe. se você usar,

document.querySelectorAll

No entanto, acredito (posso estar errado), ele retorna todos os itens com esse nome de classe como uma matriz, em que querySelector regular é equivalente a querySelectorAll [0]. Mais uma vantagem é que você pode executar consultas css3 através dele, o que pode ser bastante útil.

Em segundo lugar,

document.getElementById("elem");

Tem uma vantagem muito boa sobre o seletor de consultas, no sentido de que é quase 5 vezes mais rápido; portanto, se você estiver sentado lá com milhares de linhas de código e quiser otimizar o código, getElementById é o caminho a percorrer.

Por fim,

document.querySelector("[id=elem]");

Pessoalmente, não vejo a necessidade de usar isso em nenhuma situação. Se você precisava de um querySelector, por que não usar um #? Isso é exatamente equivalente ao seu primeiro exemplo de querySelector, no entanto, ele possui muitos caracteres inúteis.

Edit: Só para esclarecer, em resumo, você provavelmente está melhor usando document.getElementById.

18
Bernie

Você pode testar você mesmo . getElementById é um método mais rápido

4
Silver_Clash

existe alguma diferença de desempenho

Provavelmente, uma vez que são funções diferentes. querySelector pelo menos precisa analisar o seletor antes de detectar que é igual a getElementById. E duvido que essa otimização ocorra para o seletor de atributos, ninguém a utiliza. Então, eu compartilho suas suposições; e os testes os confirmam (graças a @Silver_Clash).

Pessoalmente, não gosto do segundo, pois é mais ambíguo e horrível de usar com valores de ID dinâmicos. Usar explicitamente getElementById é apenas mais conciso.

4
Bergi