jQuery Encuentra Rendimiento

Question

Estoy descubriendo que esto:

var $colSelect = $('#stuff').find('.things'); 
$($colSelect).find('img, input, select').addClass("foo"); 

es más lento que esto:

var $colSelect = $('#stuff').find('.things'); 
$($colSelect).find('img').addClass("foo");      
$($colSelect).find('input').addClass("foo");     
$($colSelect).find('select').addClass("foo"); 

¿Alguien puede ayudar a entender por qué esto es así? En específico, estoy notando el aumento del rendimiento en IE8.

Answer 1

en el segundo caso, el subárbol DOM bajo $ colSelect se recorrerá tres veces. Por eso será lento.

Answer 2

Actualización 2: se ha modificado para reflejar la naturaleza de cuadrícula de lo que tiene. Aquí están mis hallazgos con jQuery 1.7.1 (uno es su código superior, dos es su código inferior). Solo tomé las 5 cosas más lentas porque todo lo demás no importaba.

Como se puede ver, la razón de que uno es probablemente más lento que el otro es debido a la función sortOrder (minified como U) y/o Array.sort. Ambos ni siquiera aparecen en Dos. El problema es definitivamente tener que regresar y ordenar los resultados. makeArray (minimizado como s) parece tomar menos tiempo en 1, pero eso no compensa la ordenación que tiene que hacerse.

Actualización: I created a jsFiddle to play around with it, y no veo una diferencia notable en IE8 entre los dos métodos. Tal vez se necesita más contexto sobre cómo se ve esta página/qué estilos se están aplicando. Puede tener algo que ver con la representación del navegador que hace que el código actúe de manera diferente.

IE8 tiene un generador de perfiles incorporado.

1. Ir a las herramientas de desarrollo (F12)
2. Haga clic en la pestaña "Perfil"
3. Haga clic en el botón "Inicio"
4. Hacer el trabajo JavaScript taht que necesita hecho
5. clic en Detener y analizar los resultados. Busca cosas que son lentas Vuélvalos a trabajar.
6. Repita

Consejos para hacer que su Javascript mejor. Trate de no llamar $ ($ colSelect) todo el tiempo. Guárdelo en una variable como tal.

var $colSelect = $($('#stuff').find('.things')); 

Answer 3

Mi conjetura sería que para el primer selector, jQuery debe analizar el selector, llame JavaScript de getElementsByTagName para cada uno y unirse a los resultados (tal vez incluso a ordenar en el orden de su posición en el DOM).

El segundo caso tiene llamadas directas a JavaScript getElementsByTagName, sin otras operaciones necesarias.

Esta página compara actuaciones: http://jsperf.com/jquery-selector-performance-problems

Answer 4

¿Qué tal esto?

$('#stuff .things') 
    .find('img').addClass("foo").end() // .end() returns to '#stuff .things' 
    .find('input').addClass("foo").end() 
    .find('select').addClass("foo");