Rendimiento del selector jQuery con contexto

Estaba leyendo este artículo de Brandon Aaron aquí , sobre cómo puede ayudar el contexto de jquery. Así que pensé en hacer una prueba por mi cuenta. Entonces esto es lo que hice.

  1. Creó un DIV con id = “context” y DIV nested con id = “holder” en “#context” creado anteriormente.

  2. Creó un DIV nested de profundidad 18 y anexó

    a él dando como resultado 20 DIV nesteds

  3. Ahora probé el tiempo necesario para acceder a “#holder” a través de los siguientes selectores:
    a. $("#holder") // no context
    segundo. $("#holder", "#context") // with "#context" selector string
    do. $("#holder", $("#context")) // sending jquery object each time with selector "#context"
    re. $("#holder", $context) // where, var $context = $("#context"). Caching jquery obj
    Se anotó cada uno de los casos donde se accedió a X = 1000 veces y la diferencia de tiempo de inicio y finalización. Encontré ese tiempo tomado para:
    el caso (a) fue el 28-32msec menos consistente [jquery-1.3.2]
    caso (b) + (c) tuvo los tiempos más altos 60-65 mseg y 70-75 mseg respectivamente
    caso (d) tenía 40-50 mseg con 1 o 2 valores adicionados.

¿Es este tipo de verificación básica válida? Puedes jugar con el código JS aquí en JSBIN. [Háganme saber si puedo mejorar esta prueba de alguna forma]
Si la respuesta es SÍ, ¿cómo puede ayudar realmente este ‘contexto’?

#NOTA: también reemplace el jquery-1.3.2 con jquery-1.4.2 en el modo de edición jsbin y se sorprenderá al ver que los números aumentan: P

El contexto realmente ayuda cuando tienes un DOM mucho más grande que estás buscando. La búsqueda de ID ya es muy rápida y el contexto realmente no ayuda mucho en ese caso. Donde el contexto realmente puede marcar la diferencia es cuando se selecciona por nombre o clase de etiqueta.

Pruebe probar así: http://jsbin.com/aciji4/4

realmente puede ver que el tiempo mejora para el contexto cuando aumenta el número de elementos en el DOM de esta manera: http://jsbin.com/aciji4/6

Tendría sentido que tomaría más tiempo usar un contexto (contra el uso de un selector solo) ya que internamente, el contexto usa el método .find (), así que en esencia, todo lo que realmente está haciendo es

 $('#context').find('#holder'); 

Principalmente lo veo como una manera más fácil de identificar elementos en eventos e iteradores donde el contexto cambia porque

 $('.holder', this) 

es más lindo que

 $(this).find('.holder') 

El selector #ID se basa en el documento nativo document.getElementById. Va a ser rápido sin importar qué.

Pruebe un selector como div.class [attribute = value] con y sin contexto. Por ejemplo *, puede seleccionar los enlaces de pregunta “Relacionados” a la derecha con este selector:

 // Selects anchor elements with href's beginning with /questions/ $('a[href^=/questions/]') 

Sin embargo, es más rápido limitar la cantidad de elementos de anclaje que el motor selector debe repetir, evaluando la coincidencia de texto relativamente costosa:

 $('a[href^=/questions/]', '.related') 

* Y haciendo caso omiso de la obviamente más fácil clase .question-hyperlink en esos enlaces, por el bien de la discusión.

Por lo que vale, $context = $("#context") sigue usando un objeto jQuery, que luego debe convertirse en un objeto DOM.

Si usa $context = $("#context")[0] , encontrará que se ejecuta tan rápido como la primera prueba.

Tenga cuidado antes de volver a configurar su código. Como en el #NOTA escrito, jQuery desde 1.4 funciona de una manera bastante diferente. La última versión puede contener incluso más optimizaciones.

Modifiqué el código jsbin anterior para tener el jQuery reciente, y agregué algunos casos adicionales también. Verá, ahora solo esos tres (2,3,6) casos tienen una penalización de rendimiento que crea un objeto jQuery más por ronda. El rest corre bastante al mismo tiempo.

Puede encontrar la versión modificada aquí: http://jsbin.com/aciji4/63/

Tomé el código JSBin y lo puse en una prueba jsPerf

$ context.find (‘. holder’) es dos veces más rápido que su competidor más cercano, $ (‘. holder’, $ context) y es diez veces más rápido que cualquier otro selector que se utilice.

En conclusión, guarde en caché sus selectores y use .find () para obtener el máximo rendimiento