Cosa è più veloce $ ("s1"). Find ("s2"). Find ("s3") o $ ("s1 s2 s3")?

jQuery è piuttosto sfaccettato quando si tratta di selezionare determinati elementi DOM. Oggi è venuto alla mia attenzione che i due modi di ottenere gli stessi elementi possono produrre velocità diversa:

$("selector1").find("selector2").find("selector3")

$("selector1 selector2 selector3")

(dove selectorX può essere ID o classe o qualsiasi altra cosa)

Entrambi producono lo stesso insieme di elementi ma ci sono differenze di velocità? In che modo jQuery attraversa effettivamente DOM? Questo è particolarmente importante nel secondo caso: passa dal selettore 1 al selettore3 o il contrario allo?

Qualcuno ha misurato la differenza tra i due?

fonte

2011-05-05 Robert Koritnik

Utilizzando un unico $('...') è circa due volte più veloce concatenamento $.find() s per me in Chrome. Questo JSPerf Benchmark ti darà una buona idea di altri browser e una volta più persone lo testeranno.

fonte

2011-05-05 16:03:24

Grazie per aver fornito un test eseguibile che può essere eseguito su diversi browser e risultati osservati. –

Il mio test FF4 dice che l'uso di 'find().' È del 21% più lento di un selettore composto. –

Sì, sembra che la differenza più grande finora sia in Chrome/IE –

Tempo a disposizione per scoprirlo!

console.time("Selector 1") 
    $("selector1").find("selector2").find("selelector3"); 
console.timeEnd("Selector 1") 

console.time("Selector 2") 
    $("selector1 selector2 selector3"); 
console.timeEnd("Selector 2")

fonte

2011-05-05 15:59:01 HurnsMobile

Eseguili separatamente. A seconda dell'implementazione del browser, il lavoro del primo test potrebbe influire sul lavoro del secondo test –

@mattcodes: Forse ho frainteso te, ma come possono influenzarsi a vicenda se non memorizzi nella cache i risultati del selettore? –

Buon punto, dovrebbero essere testati separatamente. Inoltre, questo upvote mi ha dato la replica '1337': D – HurnsMobile

C'è una differenza tra i due se si utilizzano le classi. $("selector1 selector2 selector3") sarà più lento in IE se tutti (o tutti) i selettori sono classi a causa della mancanza di supporto per document.getElementByClassname. Anche in IE $("selector1").find("selector2").find("selector3") sarà più lento se selector1 è una classe (per lo stesso motivo di prima). Non penso che troverete un tempismo cross browser a causa dei diversi metodi disponibili per il codice jQuery in IE vs FF.

fonte

2011-05-05 16:04:27 scrappedcola

Secondo http://jsperf.com/nested-find-vs '$ ('. Class1 ...')' è in realtà il più veloce. Ancora più veloce degli ID. –

Dopo aver esaminato i risultati di @jcm, ho deciso di testare ulteriormente questi selettori. Sono entrato nell'ipotesi che una struttura DOM più complessa avrebbe prodotto risultati molto diversi.

Qui ci sono le prove che ho creato http://jsperf.com/complex-dom-jquery-selectors-vs-traversal-methods

Questo utilizza la più recente jQuery (v1.6). Sembra che .find() passi rapidamente più veloce degli altri metodi di attraversamento. Questa è una notizia molto interessante. Per molto tempo, molti utenti di jQuery (incluso me stesso) hanno offerto il consiglio che si dovrebbero usare i metodi di attraversamento, (e tipicamente evitare il metodo find) invece delle stringhe del selettore. Così tanto per quello!

Immagino che la lezione da apprendere qui sia che, quando la performance assoluta è un must, piuttosto che dipendere unicamente da prove storiche, prova le tue ipotesi.

fonte

2011-05-06 15:24:41 Stephen

Cosa è più veloce $ ("s1"). Find ("s2"). Find ("s3") o $ ("s1 s2 s3")?

risposta

Problemi correlati