JQuery Trova Prestazioni

Question

mi sto trovando che questo:

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

è più lenta allora questo:

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

Qualcuno può aiutarmi a capire il motivo per cui questo è il caso? Nello specifico, noto l'aumento delle prestazioni in IE8.

Answer 1

in 2 ° caso, la sottostruttura DOM in $ colSelect verrà attraversata tre volte. Ecco perché sarà lento.

Answer 2

Aggiornamento 2: modificato per riflettere la natura della griglia di ciò che si ha. Ecco i miei risultati con jQuery 1.7.1 (uno è il tuo codice principale, due è il tuo codice sorgente). Ho preso solo le 5 cose più lente perché tutto il resto non aveva importanza.

Come si può vedere, la ragione per cui uno è probabilmente più lento rispetto l'altro è a causa della funzione sortOrder (minified come U) e/o Array.sort. Entrambi questi non si presentano nemmeno in due. Il problema è sicuramente dover tornare indietro e ordinare i risultati. makeArray (minificato come sopra) sembra richiedere meno tempo in 1, ma ciò non compensa l'ordinamento da eseguire.

Aggiornamento: I created a jsFiddle to play around with it e non vedo una differenza evidente in IE8 tra i due metodi. Forse è necessario più contesto in ciò che questa pagina assomiglia/quali stili vengono applicati. Potrebbe avere qualcosa a che fare con il rendering del browser che sta causando il tuo codice per agire in modo diverso.

IE8 ha un profiler incorporato.

1. Vai agli strumenti di sviluppo (F12)
2. Fare clic sulla scheda "Profilo"
3. Fare clic sul pulsante "Start"
4. Fare il lavoro JavaScript taht è necessario fare
5. Clicca stop e analizzare le scoperte. Cerca le cose lente. Li rielabora
6. Ripetere

Suggerimenti per rendere il vostro javascript meglio. Cerca di non chiamare $ ($ colSelect) tutto il tempo. Salvalo in una variabile come questa.

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

Answer 3

La mia ipotesi è che per la prima selettore, jQuery deve analizzare il selettore, la chiamata di JavaScript getElementsByTagName per ciascuno e per unire i risultati (forse anche ordinandoli secondo l'ordine della loro posizione nel DOM).

Il secondo caso ha chiamate dirette su JavaScript getElementsByTagName, senza altre operazioni necessarie.

Questa pagina confronta le performance: http://jsperf.com/jquery-selector-performance-problems

Answer 4

ne dici di questo?

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