[performance-web] JS Events listeners, où brancher??

18 views
Skip to first unread message

Jorge GOMES

unread,
Feb 28, 2013, 4:11:08 AM2/28/13
to perform...@googlegroups.com
Bonjour à tous,

J'a par habitude d'essayer d'écouter mes events (click, change) au niveau du body. Je tente ainsi de bénéficier du bubbling et aussi de brancher le moins d'événements possible sur les éléments de la page. Je le fais via jquery avec un simple $('body').delegate(event, tag, fonction). Ensuite, je peux découvrir les actions à prendre par rapport à un attribut du target, comme sa class ou encore un attribut data-SOMETHING.

<span data-action='load'>Hello</span>

Comme je vous ai dit c'est une façon générale de brancher mes évents, mais si j'ai besoin je peux aussi brancher un event dans un scope plus réduit.

Alors ma question? Faut il brancher le moins d'events possible? Quel est le trade-off sur ce point?

Merci;

Jorge GOMES

Anthony Ricaud

unread,
Feb 28, 2013, 8:47:52 AM2/28/13
to perform...@googlegroups.com
Attacher peu de listeners sur le body:
+ Temps d'initialisation très court
- Plus tu auras de types d'événements et d'événements lancés, plus ton code de routage sera lent à exécuter à chaque événement reçu

Attacher des listeners plus ciblés:
+ Réponse rapide à chaque événement reçu
- Temps d'initialisation plus long

Bien sur, ce sont les extrêmes, tu peux trouver un compromis en attachant des listeners sur des zones plutôt que tout le body.
> --
> --
> Liste de diffusion sur les performances web : http://groups.google.com/group/performance-web
> Plus d'informations : http://performance.survol.fr/
> Se déinsinscrire : performance-w...@googlegroups.com
> ---
> Vous recevez ce message, car vous êtes abonné au groupe Google Groupes performance-web.
> Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse performance-w...@googlegroups.com.
> Pour plus d'options, visitez le site https://groups.google.com/groups/opt_out .
>
>

Mickael Morier

unread,
Feb 28, 2013, 8:51:57 AM2/28/13
to perform...@googlegroups.com
+1

Perso j'ai tendance plus à mettre le listener sur une zone plutôt que tout le body, un compromis entre les deux approches. Ce n'est plus qu'une question de perf, mais aussi comprendre à quoi sert le listener rapidement.

Quelques exemples :
  • Un listener sur un tableau de données qui gère tous les clicks de chaque cellule au lieu d'en mettre sur chacune
  • Un listener sur une liste pour tous ses éléments

Mickaël


2013/2/28 Anthony Ricaud <ant...@ricaud.me>

Eric Daspet

unread,
Mar 1, 2013, 12:56:37 PM3/1/13
to Webperf User Group
J'aurai tendance à dire que si tu attaches tout sur le body pour
gagner du temps mais que ça veut dire refaire en js la cascade que le
navigateur sait faire nativement, tu as plus de chances de créer des
bugs ou des ralentissements que d'y gagner en performance.

La délégation d'événements ça me parait bien quand tu as une zone
particulière qui a beaucoup d'éléments d'un même type à attacher, mais
je n'en ferai pas une règle générale avec un seul listener qui
redispatch.

Premier conseil : déjà faire du classique, puis voir si tu ressens le
besoin d'une délégation avant de commencer par optimiser ce genre de
choses.

-- Eric

2013/2/28 Jorge GOMES <gomes...@me.com>:
> --
> --
> Liste de diffusion sur les performances web : http://groups.google.com/group/performance-web
> Plus d'informations : http://performance.survol.fr/
> Se déinsinscrire : performance-w...@googlegroups.com
> ---
> Vous recevez ce message, car vous êtes abonné au groupe Google Groupes performance-web.
> Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse performance-w...@googlegroups.com.
> Pour plus d'options, visitez le site https://groups.google.com/groups/opt_out .
>
>



--
Éric Daspet
http://eric.daspet.name/
Reply all
Reply to author
Forward
0 new messages