jQuery Selectors, efficiency

He estado leyendo más últimamente sobre la eficiencia de los diferentes motores de selección. Sé que jQuery usa el motor Sizzle y this blog post sobre algunas cosas de jQuery mencionó que el motor Sizzle dividirá su selector en una matriz y luego analizará de izquierda a derecha.jQuery Selectors, efficiency

Luego, de derecha a izquierda, comienza a descifrar cada elemento con expresiones regulares. Lo que esto significa también es que la parte de la derecha de su selector debe ser lo más específica posible, por ejemplo, un nombre de identificación o etiqueta.

Mi pregunta es si es más eficiente para ejecutar un selector con simplemente el ID especificado o el nombre de la etiqueta, así:

var div = $('#someId'); 
//OR 
var div = $('div#someId');

Desde que escribo mi CSS en forma div#someId tiendo para hacer mis selectores de la misma manera, ¿estoy causando que Sizzle realice un trabajo extra (suponiendo que QuerySelectorAll no está disponible)?

Fuente

2011-08-31 Chad

¡Buena pregunta! Estaba pensando en hacer una pregunta similar yo mismo. –

Para preguntas de rendimiento, la mejor respuesta suele ser intentarlo usted mismo. jsperf.com puede ayudarlo a evaluar los fragmentos de javascript. – Eduardo

jQuery y el chisporroteo optimizar el selector #id^[source]-document.getElementById(id). Creo que no pueden optimizarlo así con el tag#id.

El primero es más rápido.

BTW especificando el nombre de la etiqueta para un selector #id está sobre-especificando, ya que solo puede haber una etiqueta con una identificación dada en el documento. La sobreespecificación es más lenta even in CSS.

Fuente

2011-08-31 19:11:10 arnaud576875

Gracias por su respuesta y jsPerf de @lonesomeday respondió mi pregunta completamente. Aparentemente necesito cambiar mi estilo de desarrollo – Chad

var div = $('#someId'); //should be faster

jQuery utilizará getElementById() para el selector arriba

var div = $('div#someId'); //would probably preform slower due to finding all the divs first

jQuery utilizará getElementsByTagName(), a continuación, iterar a pesar de la disposición de elementos para el selector arriba

También debe recordar, los nombres de etiqueta deben Definitivamente se utilizará con selectores de clase (siempre que sea posible)

var div = $('div.myclass') //faster than the statement below

frente

var div = $('.myclass') //slower

Fuente

2011-08-31 19:11:27

¿Por qué? (Dado que el navegador tiene document.getElementsByClassName ahora?) – arnaud576875

@ arnaud576875 getElementsByClassName no está disponible en todos los navegadores. Lo usará si está disponible pero los navegadores más antiguos no son compatibles con la función. Como IE 7 –

Eso tiene sentido :) – arnaud576875

Si está utilizando jQuery, puede suponer un navegador con getElementById. $('#someId') se puede convertir a document.getElementById('someId'). $('div#someId') no lo será, por lo que será más rápido perder el nombre de la etiqueta.

jsPerf demonstrating this. La diferencia es enorme

Fuente

2011-08-31 19:11:32 lonesomeday

Sorprendente, la diferencia de velocidad aquí fue sorprendente. Tendré que evaluar cómo hago mis selectores. Tenía la impresión de que era lo suficientemente inteligente como para convertir '$ ('div # someID')' a 'getElementById ('someID')', pero tiene sentido que agregue otra restricción en mi selector, tiene que ser un 'div'. Gracias por esto. – Chad

JsPerf: http://jsperf.com/jquery-id-vs-tagname-id

La primera de ellas va a ser más rápido, ya que sólo tiene que comprobar el id. El segundo ejecuta el mismo control Y debe asegurarse de que el nombre de etiqueta sea correcto. div#id no le dará el elemento con id id a menos que sea div

Fuente

2011-08-31 19:14:20 Dennis

En lugar de especular, vamos a medirlo!

Aquí hay un caso de prueba con esta página cargada, luego haciendo coincidir un elemento aleatorio con ambos métodos.

Asegúrese de desplazarse hasta la parte inferior.

http://jsperf.com/which-jquery-sizzle-selector-is-faster#runner

Como era de esperar, un identificador de llanura es más rápido que uno cualificado etiqueta (reducción a GetElementByID). Esto es lo mismo cuando se usan clases.

Seleccionar por ID es mucho más rápido que seleccionar por clase, principalmente ya que se garantiza que los ID sean únicos.

Fuente

2011-08-31 19:20:34

Puede ver desde el código fuente aquí: http://code.jquery.com/jquery-1.6.2.js en la función init.

El selector más rápido es $('') que simplemente devuelve inmediatamente un objeto jQuery vacío.

$('body') es el siguiente, que jQuery se convierte en document.body

El siguiente es $('#id') que utiliza document.getElementById('id').

Cualquier otro selector como $('div#id') se convertirá en una llamada al $(document).find('div#id'). find() es muy complejo en comparación con cualquiera de esas otras soluciones y utiliza Sizzle JS para seleccionar el div.

Fuente

2011-08-31 19:36:17 Paulpro

Respuesta

Cuestiones relacionadas