Ho una domanda generale sugli eventi/ascoltatori di javascript (jQuery). Esiste un limite per il numero di listener di clic senza problemi di prestazioni?L'aggiunta di troppi listener di eventi influisce sulle prestazioni?
In termini di prestazioni, il numero di elementi a cui è associato l'evento è dove si vedrebbero eventuali problemi.
Questo è un jsperf test. Vedrai che il binding a molti elementi è molto più lento, anche se in ciascun caso viene associato un solo evento.
Il terzo test in jsperf mostra come associare l'evento a un elemento padre e utilizzare la delega per ascoltare gli elementi desiderati. (In questo caso .many)
n.b. Il test mostra che la terza opzione è la più veloce, ma è perché ha come target l'elemento con un id e non una classe.
Aggiornamento: Ecco un altro che mostra perf test 3 eventi legati a un id vs un evento legato con un class
Grazie per la risposta @atmd - Il [test jsperf] (http://jsperf.com/click-perf) ha dimostrato il problema in modo eccellente –
Ho fatto +1 anche a questa risposta In generale, se stai usando jQuery, cerca di favorire l'argomento extra delegato quando si usa '$ (elemento). on() '... quindi al posto di $ ('ul li'). on ('clic', callback)' Usa '$ ('ul'). on ('click', 'li', callback) '. – ded
@ded Concordato. Potrei aggiornare la risposta ad un certo punto con un jsperf per mostrare gli effetti della delega. sarebbe interessante vedere se/come il numero di elementi figlio (nel tuo esempio il 'li') gli effetti – atmd
bisogno di maggiori contenuti davvero. un click handler non ti dà problemi di perfomance, è che le azioni intraprese al clic che 'possono' causare problemi. inoltre, un clic potrebbe essere associato a 1 elemento o 20.000 elementi, quindi sono necessarie ulteriori informazioni. – atmd
Se inserisco più elementi, un click listener con jquery. Questo è ciò che intendo. L'intera app deve ascoltarla. Sto parlando di un ascoltatore di clic su 5-20. Non so se questo è un problema, è per questo che sto chiedendo :) –
Ecco un test [jsperf] (http://jsperf.com/click-perf) sugli eventi click associati a uno o più elementi, vedrai che anche se è associato un solo evento, il numero di elementi che corrispondono a quella selezione ha un impatto maggiore. in modo tale da ottenere risultati perf molto più del numero di eventi. Il test (appena aggiornato) mostra anche come ti legherei a un genitore, per migliorare il legame del legame con molti elementi. (funziona il più veloce qui visto che è un 'id' – atmd