¿Qué es más rápido y por qué? Seleccionando div (para las necesidades de complementos) por $('div[data-something]') o $('div.something')? Me inclino por el anterior ya que es "más limpio".rendimiento de jQuery: seleccione por data-attr o por clase?
Basado en this SO question Sé que no debería usar ambos. Sin embargo, no descubrí si hay una diferencia entre estos.
Varía según el navegador. Casi todos los navegadores ahora son compatibles con querySelectorAll, y jQuery lo usará cuando sea posible. querySelectorAll se puede utilizar con selectores de presencia de atributos, por lo que si está allí jQuery no tiene que hacer el trabajo, puede descargarlo al motor.
Para navegadores más antiguos sin querySelectorAll, jQuery obviamente tendrá que hacer más trabajo, pero incluso IE8 lo tiene.
Al igual que con la mayoría de estas cosas, lo mejor es:
No se preocupe por ella hasta/a menos que vea un problema, y
Si usted ve un problema, el perfil en los navegadores que pretendes apoyar y luego tomar una decisión informada.
Seleccionar por clase es siempre más rápido que el selector de atributos porque jQuery primero intenta utilizar el getElementByCalssName nativo si es compatible con navegadores. Si no, usa el querySelector que usa los selectores de CSS para encontrar los elementos dentro de la página.
No, jQuery usará 'querySelectorAll' en casi todos los navegadores, en lugar de' getElementsByClassName'. Volverá a 'getElementsByClassName' para selectores de clases simples (no combinados como' div.test'), pero de cualquier forma está difiriendo a la implementación CSS propia del navegador en cualquier cosa moderna. –
¿Por qué downvote? – ShankarSangoli
Me parece un poco duro, pero probablemente es porque dijiste 'div.something' siempre sería más rápido, y no lo es. –
En Chrome 16 como mínimo, there is no difference. Sin embargo, si se hace el selector de clase menos específica ($(".test") por ejemplo), que hace superar a los otros métodos:
Eso fue algo inesperado, ya que como menciona ShankarSangoli, pensé que el selector de div.test clase sería Más rápido.
Resultados similares en IE9, con 'div.something' siendo muy ligeramente más rápido que' div [data-something] ', pero ambos son mucho más lentos que' .something'. –
@ T.J.Crowder - Gracias por salvarme unos minutos ejecutándolo en IE9 :) Firefox vuelve a ser lo mismo. He actualizado la captura de pantalla para incluir esos resultados. –
''.test'' permitirá a Sizzle optimizar la selección de DOM utilizando' getElementsByClassName' en lugar de 'querySelectorAll'. En la mayoría de los navegadores, el primero es actualmente más rápido. Pero '' div.test'' probablemente sea más rápido en navegadores como IE6 e IE7 que no admiten ni 'gEBCN' ni' qSA' porque reduce la prueba de clase manual a solo elementos 'div'. –
buenas preguntas ... ¿alguien puede probar $ ('*') cada una para mí? :) siempre quise saber qué hace o cuál es su rendimiento – ggzone