Performance Javascript? - Mettre des événements dans la balise html, ou les lier?

Question

Je me demande quel est le meilleur pour la performance ... J'ai une sorte de "web app". Il y a beaucoup de javascript. Lorsqu'un bouton est cliqué, un div masqué devient visible. Cette nouvelle div a 5 boutons. Quel est le meilleur pour la performance:

1.) mettre les événements de clic de bouton dans la balise html de chaque bouton comme onClick = "alert ('hey');" 2.) Attacher des événements à chaque bouton lorsque la div est visible, puis supprimer les événements lorsque je cache la div contenant les boutons?

La raison pour laquelle je demande est parce que j'imagine que la page pourrait s'enliser si les événements dans les balises html sont constamment là. Je pense que la page pourrait être plus rapide à avoir seulement ces événements lorsque l'utilisateur peut voir les boutons pour les cliquer.

Toute aide est géniale! Merci!

Answer 1

A moins que ces événements ne provoquent un lien (que Google semble avoir lu), mettez tout ce JS en dehors de votre HTML. Cela rend votre code plus net et plus facile à maintenir. Vous ne pouvez pas être sûr de la performance.

Answer 2

Conserver les gestionnaires d'événements enregistrés lorsque les éléments sont masqués n'aura aucun impact sur les performances, car les événements ne se déclencheront pas.

L'utilisation des attributs HTML ou du DOM pour enregistrer les gestionnaires d'événements n'est pas une question de performance, mais une question de conception propre. Vous voudrez garder la présentation aussi distincte du comportement que possible. Cela signifie que si vous utilisez des attributs, ils doivent uniquement lier l'événement à un gestionnaire (c'est-à-dire appeler une seule fonction) plutôt que de contenir du code plus complexe. Autrement dit, ne pas:

<button onclick="if ('red'==this.parent.style.backgroundColor) {...}">...</button> 

faire:

<button onclick="clickColorButton(event)">...</button> 

Answer 3

J'utiliseraient event delegation. De cette façon, vous pouvez librement ajouter/supprimer des boutons sans vous soucier de joindre des événements sur chacun d'entre eux. Cette approche est également plus efficace en termes de mémoire, car vous avez toujours un seul gestionnaire d'événements au lieu de N directement sur chaque bouton.