frais généraux de performance des écouteurs d'événements sur les classes CSS utilisées dans le code JQuery

Question

Si mon code ressemble à ceci:

<button id="button-1" class="nice"> 
<button id="button-2" class="nice"> 
<button id="button-3" class="nice"> 

et je définir la jQuery suivante:

$(".nice").click(function() { 
    // something happens 
}); 

1. Combien d'auditeurs d'événements sont établis? 1 ou 3?

2. Si j'ai 1000 boutons au lieu de 3, devrais-je utiliser la délégation d'événement à la place?

3. Est-il préférable, en termes de performances, de ne pas définir les appels jQuery sur les classes d'éléments si ces classes contiennent un grand nombre d'éléments dans le balisage?

Answer 1

1) 3 écouteurs d'événements pointant tous vers la même fonction.

2) Cela dépend de ce que vous essayez d'accomplir

3) Essayez de faire quelques repères, voir où le succès de la performance devient perceptible. Jusqu'à 1000 éléments ont été sélectionnés puis animés en même temps - et (dans FF) le hit de la performance était imperceptible jusqu'à 600-700 éléments. Les performances dépendent bien sûr du navigateur et du moteur JS. Certains (Chrome) seront plus rapides que d'autres (IE). Il vaut la peine de mentionner que pour ce site j'ai utilisé la même méthode que vous avez dans votre question.

Answer 2

1) 3

2) Oui

3) Oui, comme vous avez dit la délégation d'événement utilisation qui jQuery est disponible via la fonction .live. Attention, un trop grand nombre de fonctions .live peut également avoir un impact sur les performances, alors considérez la délégation d'événement natif.

Answer 3

Entièrement d'accord! Vous devez ajouter un écouteur d'événement à l'élément parent contenant tous ces éléments sympa. Cela améliorera beaucoup la performance.

Answer 4

1. Oui, parce la fonction retourne un tableau $() et click() est appliqué à tous les éléments qui s'y trouvent.
2. Oui. La délégation rapporte généralement mieux lorsque vous avez un grand nombre de nœuds pouvant déclencher un événement ou lorsque la quantité de ces nœuds peut changer. Cela vous permet de ne devoir initialiser votre écouteur d'événement qu'une seule fois, quoi qu'il arrive au DOM. Si vous envisagez d'avoir plus de 100 nœuds, j'utiliserais la délégation d'événements plutôt que la gestion des événements.
3. Oui. Cela améliorera à la fois votre temps de réponse (notamment pour les très grandes listes [s'il vous plaît benchmark]), ainsi que votre initialisation O (1) plutôt que O (n).