Alcune domande circa le punte jquery 25

Question

Stavo leggendo questo: http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

E aveva alcune domande su alcuni dei trucchi sostenuto:

9 - Lascia la tua selettori un contesto:

Qual è la differenza tra l'utilizzo di un contesto e l'utilizzo di un selettore più specifico?

Piuttosto che fare

var selectedItem = $('#listItem' + i, $('.myList')); 

Che dire

var selectedItem = $('.myList>#listItem' + i); 

che uno è più veloce/migliore, o non c'è differenza?

12 - Informazioni sui delegazione evento:

Immagino che a bassa gestore conta delegazione evento è più lenta del normale vincolante.

Quanti gestori è il momento in cui è opportuno iniziare a utilizzare la delega degli eventi?

Inoltre, qual è la differenza (in termini di quanto velocemente o quanto 'buono' è) tra l'utilizzo di delega e la creazione di un target di clic in dom, avendo l'utente clicca tale obiettivo click, e quindi avere il ritrovamento click bersaglio gli elementi da manipolare. Questo metodo è più veloce o la delega è più veloce?

Modifica: Inoltre, quanti livelli dovresti delegare? È meglio delegare qualcosa a 10 livelli di distanza o semplicemente legare 2 gestori.

13 - Utilizzare le classi per memorizzare lo stato

14 - Ancora meglio, utilizzare i dati interni di jQuery() metodo per memorizzare lo stato:

Perché l'uso dei dati vs classi? I dati sono più veloci? Penso che in genere trovo le classi più facili da leggere, contraddicendo ciò che dice nel post di blog, perché posso vederlo nel DOM.

Grazie!

Answer 1

9 - Lascia la tua selettori un contesto:

var selectedItem = $('#listItem' + i, $('.myList')); 

v/s

var selectedItem = $('#listItem' + i); 

Secondo l'articolo, il primo dovrebbe essere più veloce. Ma non riesco a vedere come possa essere ...

Prima di tutto l'accesso tramite ID è uno dei modi più veloci per raggiungere un elemento. È solo una ricerca dalla tabella hash dell'ID globale. Aggiungere un contesto ad esso non dovrebbe aggiungere velocità. La ricerca del contesto dovrebbe richiedere un po 'di tempo in più e quindi il primo esempio dovrebbe essere più lento.

Ho fatto anche alcune misurazioni e ho scoperto che in effetti il ​​primo è molto più lento.

Per quanto riguarda questo:

var selectedItem = $('.myList>#listItem' + i); 

che dovrebbe essere circa la stessa velocità come il primo. E secondo le mie misurazioni è in effetti circa lo stesso, solo un po 'più veloce.

Ma il contesto che specifica può essere utile quando si tratta di altri tipi di selettori e soprattutto si riutilizzarlo, così:

var ctx = selectedItem = $('.myList') 
for (var i=0; i<1000; i++) { 
    var selectedItem = $('.listItem' + i, ctx); 
} 

In questo esempio ti dà un notevole impulso di velocità.

Come per tutto il resto relativo alle prestazioni, è necessario misurare prima di sapere se qualcosa si applica alla situazione specifica.

Quanti gestori è il momento in cui è necessario iniziare a utilizzare la delega degli eventi?

Quando sento che la pagina è lenta. Il 99% delle volte i normali gestori di eventi sono abbastanza buoni.

Answer 2

Non posso rispondere a tutte le domande, ma probabilmente potrei fornire alcune informazioni rilevanti, che possono essere utili.

9 - Lascia la tua selettori un contesto:

primo è più sofisticato, dal momento che in questo modo è possibile passare un elemento iframe e di ricerca lì. Non penso che ci sia una differenza nella performance.

Dalla documentazione:

JQuery (espressione, contesto)
La funzionalità di base di jQuery centri intorno a questa funzione.Tutto in jQuery si basa su questo, o lo usa in qualche modo. L'uso più basilare di questa funzione è quello di passare un'espressione (solitamente composta da CSS), che trova quindi tutti gli elementi corrispondenti.

Per impostazione predefinita, se non viene specificato contesto, $() cerca elementi DOM all'interno del contesto del documento HTML corrente. Se specifichi un contesto, come un elemento DOM o un oggetto jQuery, l'espressione verrà confrontata con il contenuto di quel contesto.

14 - Ancora meglio, usano dati interni di jQuery() metodo per memorizzare lo stato:

Questa funzione può essere utile per il fissaggio di dati agli elementi senza dover creare un nuovo expando. Inoltre non è limitato a una stringa. Il valore può essere in qualsiasi formato. La classe è più generale, qui puoi legare i tuoi dati con un elemento o un insieme di elementi. Può essere usato come metadata in una certa prospettiva.

PS. Potete trovare ulteriori informazioni here

Answer 3

Per (9)

Poiché ci dovrebbe essere solo uno elemento con un dato id il materiale extra non sembra necsesary ... a meno che non si è test per vedere se è effettivamente lì (in quel preciso annidamento)

Se il contrario è il caso (ad esempio il contesto è molto specifico, e l'elemento (i) selezionato (i) che si desidera è abbastanza generico) Posso vedere come questo aiuterebbe ...

//LI elems with CSS class "foo" 
//but only inside the element with the ID "onlyInHere" 
$('li.foo', '#onlyInHere') 

Answer 4

Per quanto riguarda # 9:

Quando si fornisce un contesto alle vostre domande di selezione si limita la dimensione della struttura viene attraversato per trovare gli elementi che corrispondono ai selettore, soprattutto se si sta utilizzando i selettori che utilizzano tag nomi come: $ ('div> span').

Le prestazioni dipendono dal tipo di selettore e dal numero di elementi nel contesto che si sta fornendo.

Dai uno sguardo allo getElementsByTagName per comprendere meglio questi problemi.

Per quanto riguarda "quale è migliore", dipende in gran parte dalla dimensione del DOM che viene attraversato e da un numero di altri elementi, ma in generale, il primo selettore (quello con il contesto) dovrebbe essere più veloce.

Per quanto riguarda # 12:

In generale, è buona norma utilizzare la delega evento quando il numero di elementi figlio all'interno di un elemento padre (cellule all'interno di una tabella, per esempio) è sconosciuto e si prevede di essere abbastanza grande Questo di solito si applica ai casi in cui i dati vengono estratti da un server. Gli scenari comuni sono strutture ad albero e a griglia.

Per quanto riguarda # 13:

Credo che l'esempio fornito nel documento ti riferisci fa il lavoro, ma cercherò di elaborare ulteriormente un po '. Le classi sono un modo comune e standard per allegare informazioni aggiuntive ai nodi HTML. Prendiamo come esempio una barra delle linguette: supponendo che tu abbia una "scheda" di classe standard che si applica a ogni scheda nella barra delle schede, potresti aggiungere una classe aggiuntiva a una delle schede per indicare che è attualmente selezionata. L'aggiunta di una classe aggiuntiva denominata "selezionata" consentirebbe di applicare uno stile diverso alla scheda selezionata e interrogare la barra delle schede utilizzando jQuery per una logica aggiuntiva (ad esempio: controlla quale scheda è attualmente selezionata per eseguire una richiesta HTTP e recuperare il contenuto per questa scheda).

Per quanto riguarda # 14:

Le lezioni sono limitati nel tipo e la quantità di dati che si può (o dovrebbe) negozio in loro. I dati sono un modo più flessibile per memorizzare grandi quantità di dati di stato per elementi HTML.