with val name ends jquery jquery-selectors performance

val - jquery selector ends with



Rendimiento de jQuery selector con contexto (6)

Estuve leyendo este artículo de Brandon Aaron here , sobre cómo el contexto de jquery puede ayudar. Así que pensé en hacer mi propia prueba. Así que esto es lo que hice.

  1. Creó un DIV con id = "context" y anidó DIV con id = "holder" en "#context" creado anteriormente.

  2. Creó un DIV anidado de profundidad 18 y le agregó <div id="context"><div id="holder"></div></div> , lo que dio como resultado 20 DIV anidados

  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 en los que se tuvo acceso a X = 1000 veces y la diferencia de tiempo de inicio y finalización. Encontré ese tiempo para:
    el caso (a) fue el menos consistente 28-32msec [jquery-1.3.2]
    el caso (b) + (c) tuvo los tiempos más altos 60-65 mseg y 70-75 mseg respectivamente
    el caso (d) tenía 40-50 ms con 1 o 2 valores enriquecidos.

¿Es este tipo de cheque básico válido? Puedes jugar con el código JS here en JSBIN. [Hazme saber si puedo mejorar esta prueba de alguna manera]
Si es SÍ, entonces, ¿cómo ayuda 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 por el que estás buscando. La búsqueda de identificaciones ya es muy rápida y el contexto no ayuda mucho en ese caso. Donde el contexto realmente puede hacer una diferencia es cuando selecciona por nombre de etiqueta o clase.

Intente realizar pruebas como esta: http://jsbin.com/aciji4/4

realmente puede ver cómo mejora el tiempo para el contexto cuando aumenta la cantidad de elementos en el DOM como este: http://jsbin.com/aciji4/6

El selector #ID se basa en el documento nativo document.getElementById. Va a ser rápido pase lo que pase.

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

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

Pero, es más rápido limitar la cantidad de elementos de anclaje que tiene el motor selector para iterar, evaluando esa comparación de texto relativamente costosa:

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

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

Para lo que vale, $context = $("#context") sigue utilizando un objeto jQuery, que luego tiene que convertirse en un objeto DOM.

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

Tendría sentido que llevara más tiempo usar un contexto (en lugar de usar solo un selector), 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 forma más fácil de identificar elementos en eventos e iteradores donde el contexto cambia porque

$(''.holder'', this)

es más bonito que

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

Tenga cuidado antes de ir a refactorizar su código. Como en el #NOTE escrito, jQuery desde 1.4 funciona de manera muy diferente. La última versión puede contener aún más optimizaciones.

Modifiqué el código jsbin anterior para tener el jQuery reciente, y también agregué algunos casos adicionales. Verá, ahora solo esos tres (2,3,6) casos obtuvieron una penalización de rendimiento que crea un objeto jQuery más por ronda. El resto corre en bastante 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 eso es diez veces más rápido que cualquier otro selector que se esté utilizando.

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