Quale è più veloce e perché? Selezionare div (per esigenze di plug-in) per $('div[data-something]') o $('div.something')? Mi chino verso il primo poiché è "più pulito".Prestazioni jQuery: selezionare per data-attr o per classe?
Basato su this SO question So che non dovrei usare entrambi. Tuttavia non ho scoperto se c'è una differenza tra questi.
Varia a seconda del browser. Quasi tutti i browser ora supportano querySelectorAll e jQuery lo utilizzerà quando possibile. querySelectorAll può essere utilizzato con selettori di presenza dell'attributo, quindi se è lì jQuery non deve fare il lavoro, può scaricarlo sul motore.
Per i browser meno recenti senza querySelectorAll, jQuery dovrà ovviamente fare più lavoro, ma anche IE8 ce l'ha.
Come con la maggior parte di queste cose, la cosa migliore è:
Non preoccuparti su di esso fino a quando/se non si vede un problema, e
Se vedi un problema, profilo sul browser che intendi supportare e quindi prendere una decisione informata.
La selezione per classe è sempre più veloce del selettore di attributo poiché jQuery tenta di utilizzare prima il codice nativo getElementByCalssName se supportato dai browser. In caso contrario, utilizza lo querySelector che utilizza i selettori CSS per trovare gli elementi all'interno della pagina.
No, jQuery userà 'querySelectorAll' su quasi tutti i browser, piuttosto che su' getElementsByClassName'. Tornerà a 'getElementsByClassName' per i selettori di classi semplici (non combinati come' div.test'), ma in entrambi i casi si rimanda all'attuazione CSS del browser su qualsiasi cosa moderna. –
Perché downvote ?? – ShankarSangoli
Sembra un po 'duro per me, ma probabilmente è perché hai detto che "div.something" sarebbe sempre più veloce, e non lo è. –
In Chrome 16 almeno, there is no difference. Tuttavia, se si effettua il selettore di classe meno specifico ($(".test") per esempio), lo fa sorpassare gli altri metodi:
che è stato un po 'inaspettato, perché, come cita ShankarSangoli, ho pensato che il selettore di div.test classe sarebbe Più veloce.
Risultati simili su IE9, con 'div.something' molto leggermente più veloce di' div [data-qualcosa] ', ma entrambi sono molto più lenti di' .qualcosa '. –
@ T.J.Crowder - Grazie per avermi salvato alcuni minuti eseguendolo in IE9 :) Firefox è più o meno lo stesso. Ho aggiornato lo screenshot per includere questi risultati. –
''.test'' permetterà a Sizzle di ottimizzare la selezione del DOM usando' getElementsByClassName' invece di 'querySelectorAll'. Nella maggior parte dei browser, il primo è attualmente più veloce. Ma ''div.test'' sarà probabilmente più veloce nei browser come IE6 e IE7 che non supportano né' gEBCN' né 'qSA' perché restringe il test della classe manuale solo agli elementi' div'. –
buone domande ... qualcuno può provare $ ('*'). Ognuno per me? :) ha sempre voluto sapere cosa fa o quale sia la sua performance – ggzone