La liaison des événements dans jQuery est-elle très coûteuse ou très peu coûteuse ?

Question

Je viens d'écrire une fonction $().bind('event') et je me suis ensuite inquiété du fait que ce type d'appel pourrait être très coûteux si jQuery devait parcourir chaque élément du DOM pour lier cet événement.

Ou peut-être que c'est juste aussi efficace qu'un événement puisse l'être. Les documents de jQuery que j'ai lus ne sont pas clairs à ce sujet. Un avis ?

Answer 1

Deux éléments peuvent ralentir votre code de liaison d'événements : le sélecteur et le nombre de liaisons. Le nombre de liaisons est le plus critique des deux, mais le sélecteur peut avoir un impact sur vos performances initiales.

En ce qui concerne les sélecteurs, veillez à ne pas utiliser de sélecteurs de noms de classes purs comme .myclass . Si vous savez que la classe de myclass sera toujours dans un <div> faites en sorte que votre sélecteur soit div.myclass car cela aidera jQuery à trouver les éléments correspondants plus rapidement. De plus, ne profitez pas du fait que jQuery vous permette de lui donner de grandes chaînes de sélection. Tout ce qu'il peut faire avec les sélecteurs de chaîne peut également être fait par le biais de fonctions, et c'est intentionnel, car il est (marginalement, il faut l'admettre) plus rapide de le faire de cette façon, car jQuery n'a pas à s'asseoir pour analyser votre chaîne pour comprendre ce que vous voulez. Ainsi, au lieu de faire $('#myform input:eq(2)'); vous pourriez faire $('input','#myform').eq(2); . En spécifiant un contexte, nous ne faisons pas non plus en sorte que jQuery cherche partout où il ne doit pas le faire, ce qui est beaucoup plus rapide. Plus d'informations à ce sujet ici .

En ce qui concerne la quantité de liens : si vous avez une quantité relativement moyenne d'éléments, tout devrait bien se passer - tout ce qui peut atteindre 200 ou 300 correspondances potentielles d'éléments fonctionnera bien dans les navigateurs modernes. Si vous avez plus d'éléments, vous devriez plutôt envisager la délégation d'événements.

Qu'est-ce que la délégation d'événements ? Essentiellement, lorsque vous exécutez un code comme celui-ci :

$('div.test').click(function() {
    doSomething($(this));
});

jQuery fait quelque chose comme ça en coulisse (en liant un événement pour chaque élément correspondant) :

$('div.test').each(function() {
    this.addEventListener('click', function() {
        doSomething(this);
    }, false);
});

Cela peut devenir inefficace si vous avez une grande quantité d'éléments. Avec la délégation d'événements, vous pouvez réduire le nombre de liaisons à une seule. Mais comment ? L'objet événement possède un target qui vous permet de savoir sur quel élément l'événement a agi. Vous pourriez donc faire quelque chose comme ceci :

$(document).click(function(e) {
    var $target = $(e.target);
    if($target.is('div.test')) { // the element clicked on is a DIV
                                 // with a class of test
       doSomething($target);
    }
});

Heureusement, vous n'avez pas besoin de coder ce qui précède avec jQuery. Le site en direct qui est présentée comme un moyen facile de lier des événements à des éléments qui n'existent pas encore, est en fait capable de le faire en utilisant la délégation d'événements et en vérifiant au moment où une action se produit si la cible correspond au sélecteur que vous lui spécifiez. Cela a pour effet secondaire, bien sûr, d'être très pratique lorsque la rapidité est importante.

La morale de l'histoire ? Si vous êtes préoccupé par la quantité de liaisons que votre script possède, remplacez simplement .bind con .live et assurez-vous que vous avez des sélecteurs intelligents.

Notez, cependant, que tous les événements ne sont pas pris en charge par les services de l'UE. .live . Si vous avez besoin d'un élément qui n'est pas pris en charge par ce système, vous pouvez consulter le site Web de la Commission européenne. livequery qui est un plugin live sous stéroïdes.

Answer 2

En gros, vous ne ferez pas mieux. Tout ce qu'il fait, c'est appeler attachEventListener() sur chacun de vos éléments sélectionnés.

Rien qu'en termes de temps d'analyse, cette méthode est probablement plus rapide que la mise en place de gestionnaires d'événements intégrés pour chaque élément.

D'une manière générale, je considère qu'il s'agit d'une opération très peu coûteuse.