migliori prestazioni per jQuery Selettore

Question

Questo ottiene e memorizza il colore di un collegamento specifico fondo:

var origColor = $("ul.relatedAlbums li a").css("background-color"); 

Ma ci sono un sacco di quei collegamenti, e ho la sensazione che questo è ineffecient. Immagino che ci sia un modo per dire alla query del selettore di fermarsi dopo la prima corrispondenza, e quindi risparmiare sul tempo di elaborazione. Ecco come immagino di farlo:

var origColor = $("ul.relatedAlbums li a:first").css("background-color"); 

È questo il modo giusto/efficace per farlo? La gente dice che usare le pseudo classi di css è lento - ma non sono sicuro che ciò si applichi. Questo ha solo la stessa sintassi, giusto?

Answer 1

Non è necessario il :first perché il metodo css esamina solo l'attributo del primo elemento nel set di elementi corrispondenti.

http://api.jquery.com/css/
css (propertyName)

ottenere il valore di una proprietà di stile per il primo elemento della serie di elementi abbinati.

Answer 2

motore di selezione di jQuery gestisce il selettore :first dalla prima ricerca di ul.relatedAlbums li a poi applicare un filtro contro tutti gli elementi corrispondenti. Sebbene questo filtro è piuttosto breve:

first: function(elem, i){ 
    return i === 0; 
} 

genera ancora una chiamata di funzione per ogni elemento nel selettore.

Il metodo .css(prop) restituirà jQuery.curCSS(elems[0], prop). Pertanto il selettore :first è puramente uno spreco di prestazioni.

Answer 3

quello RamboNo5 ha detto, ma se si desidera modificare il colore di sfondo solo per il primo elemento è possibile utilizzare

var origColor = $("ul.relatedAlbums li a:first").css("background-color", "red"); 

come hai detto, ma penso che si potrebbe anche usare

var origiColor = $("ul.relatedAlbums li").first().css("background-color", "red"); 

Non l'ho provato, ma penso che dovrebbe funzionare e credo che sia più veloce, dal momento che non richiede l'analisi del selettore.

un'occhiata a: - api.jquery.com/first-selector/ - http://api.jquery.com/first/ per ulteriori informazioni

Answer 4

Non credo che il: primo selettore comprerà molto.

Uno dei modi migliori per migliorare le prestazioni con un selettore consiste nell'utilizzare il parametro di contesto opzionale con un selettore di ID.

qualcosa di simile ...

var origColor = $("ul.relatedAlbums li a", "#surroundingDiv").css("background-color"); 

Questo secondo selettore contesto in realtà dice al motore di jQuery per prima cercare il DOM per #surroundingDiv. E poi quei risultati si restringono ulteriormente con il primo selettore.

Poiché i selettori di id sono di gran lunga il più veloce di tutti i selettori, questa tecnica può talvolta raddoppiare le prestazioni a seconda delle dimensioni relative del contesto rispetto al resto del DOM.

Answer 5

Per quanto strano possa sembrare, sto ottenendo "a: first" sempre più velocemente su Safari e Firefox, e più lento su Chrome e Opera su these tests. Tuttavia, questi risultati sono per quasi 12.000 link sulla pagina, quindi un millisecondo qui o là non vale la pena di tirare i capelli.

Safari

alt text http://tinyurl.com/27polne

Firefox

alt text http://tinyurl.com/2ay56yr

Chrome

alt text http://tinyurl.com/248nurm

Opera

alt text http://tinyurl.com/254unwc

---

Per ottimizzare realmente questo, non si dovrebbe mai selezionare tutti i collegamenti. Assegna un ID univoco al primo link e accedi solo a quello. Ecco uno new test con la ricerca di un singolo elemento e soffia le altre tecniche sproporzionate. Inutile dire che questo sarebbe stato ovviamente molto veloce, ma questo è solo un paragone di quanto effettivamente più veloce.

OK, non posso resistere aggiungendo jQuerystyleperformancenumbers dai suoi 1,0 giorni :)

Safari (112.000% più veloce)

alt text http://tinyurl.com/2b2w2fc

Firefox (30.000% più veloce)

alt text http://tinyurl.com/25xjzs4

Chrome (24.000% più veloce)

alt text http://tinyurl.com/28w9fgq

Opera (38.000% più veloce)

alt text http://tinyurl.com/27lsz2u

Setup:

• OS: OS X 10.5.8
• Opera: 10.10, costruzione 6795
• Chrome: 5.0.375.70
• Safari: 4.0.5 (5531.22.7)
• Firefox: 3.6.4