jQuery prestazioni: $ ('# selettore') LIVE() vs legare manualmente (quando si lavora con le richieste Ajax)

Question

Quando si lavora con i contenuti caricati in modo asincrono v'è alcuna differenza da un punto di vista delle prestazioni tra:.

// .live() 
$('#mybutton').live('click', function(e){ doSomething(); }); 

e manualmente bind() gli eventi di cui abbiamo bisogno ogni volta dopo che il contenuto è stato caricato:

// manual bind every time 
$.ajax({ 
    url: url, 
    success: function(data){ 
     mycontainer.html(data); // data contains #mybutton 
     $('#mybutton').click(function(e){ doSomething(); }); 
    } 
}); 

?

Answer 1

Non ci sono costi diversi, diamo un'occhiata a loro:

$('#mybutton').live('click', function(e){ doSomething(); }); 

Ci sono 2 principali costi qui:

• Il selettore #mybutton ha la necessità di eseguire immediatamente per nessun motivo (il risultato si butta via , volevamo solo il selettore comunque ... siamo vincolati a document). In questo caso è un #id selector quindi è un costo molto basso ... in altri casi non è economico e molto dispendioso (ad esempio [attr=something]).
• Ogni click che bolle fino a document deve ora essere confrontato con questo selettore, un costo di valutazione per clic, che varia in base al numero di clic previsti.

---

Ora diamo un'occhiata a l'altro metodo:

$('#mybutton').click(function(e){ doSomething(); }); 

Ci sono 2 principali costi qui così:

• I #mybutton piste di selezione, ma solo una volta per ogni richiesta ajax . Tuttavia, non lo stiamo sprecando, stiamo usando i risultati.
• Il gestore click è legato a un elemento reale, piuttosto che document, quindi c'è un costo vincolante ogni volta che viene eseguito, invece di una volta

Tuttavia, non c'è nessun costo per clic e la chiamata di selezione di per sé non è sprecato ... quindi è complessivamente migliore, dal momento che stai usando un ID, questo non è vero negli altri casi.

---

Nel tuo caso, dal momento che hai a che fare con un ID (e garantito un unico elemento), questo è molto più conveniente:

$('#mybutton').click(function(e){ doSomething(); }); 

In altri casi, dove si sta vincolante centinaia di elementi, .live() è il chiaro vincitore, anche se .delegate() sarebbe ancora meglio.

Answer 2

Probabilmente un po ', ma non me ne preoccuperei. Per me il metodo .live() sembra molto più facile da mantenere, quindi lo userei. Finché non rallenta niente, non c'è bisogno di preoccuparsi delle prestazioni in JavaScript.

Answer 3

Dall'aspetto della funzione di successo, stai allegando un evento perché quell'elemento è ora disponibile nel tuo html? È così?

In questo caso, se la funzione chiamata tramite il clic è sempre la stessa, è possibile utilizzare "live". Live ti consente di associare eventi che non esistono ancora. Quindi puoi inserirla anche prima del tuo documento. Già. Quindi, mentre l'ajax aggiorna il tuo documento principale, quell'evento dovrebbe sempre funzionare. Non dovrai assegnarlo ogni volta.

Così si ottiene il vantaggio in termini di prestazioni di non dover fare qualcosa ogni volta che si torna da una chiamata Ajax, si esegue la configurazione senza fare affidamento su document.ready e il suo garantito per funzionare.

HTH.