Le délégué est-il le moyen le plus rapide d'établir des liens ?

Question

Quelqu'un pourrait-il expliquer pourquoi le délégué semble plus rapide que la liaison par alias ou on().

Il s'agit d'un cas d'essai :

jsPerf

$('p').on('click',$.noop); //80% slower

$('p').click($.noop); //84% slower

$(document).delegate("p", "click",$.noop); //fastest

En vérifiant la source de Jquery, il semble qu'avant de lier un événement, Jquery vérifie les délégués.

Est-ce une affirmation correcte ou y a-t-il autre chose ?

Answer 1

L'erreur que vous avez commise est de penser qu'il n'y a qu'un seul élément p.

J'ai ajouté un autre test, avec seulement console.log($('p').length); et il a montré qu'il y avait 7 p visibles du test, dont la visibilité n'était évidemment pas limitée au HTML que vous avez construit dans le code de préparation.

Cela signifie que les deux premières fonctions ont dû effectuer 7 fixations supplémentaires.

Answer 2

Les deux sites delegate() y bind() appelez simplement on() . Voici un extrait de la source de jQuery 1.9.0 :

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

Así que on() devrait être légèrement plus rapide que les deux autres fonctions, puisqu'il s'agit d'un appel de fonction en moins. L'invocation réelle du gestionnaire devrait être identique, quelle que soit la manière dont il a été lié.

Mais assurez-vous que vous comparez des pommes avec des pommes. Si vous donnez à un selector argument pour delegate o bind l'invocation du gestionnaire sera plus lente car il doit vérifier si la cible satisfait au sélecteur.

La raison de votre résultat de référence est que

$("p").on('click',$.noop);

est équivalent à quelque chose comme :

$("p").each(function() {
    $(this).on('click', $.noop);
});

Il doit trouver tous les éléments correspondants et leur associer un gestionnaire. Le site delegate() ne doit lier un gestionnaire qu'à un seul élément (le document) ; au lieu de trouver tous les éléments au moment de la liaison, au moment où l'événement se produit, il fait quelque chose du genre :

if ($(event.target).is("p")) { ... }

L'utilisation de on() qui est équivalent à delegate() serait :

$(document).on('click', 'p', $.noop);

Lorsque vous déléguez à partir d'un élément important comme document vous invoquez le gestionnaire interne à chaque fois que vous cliquez n'importe où dans le document, ce qui vous fait perdre du temps pour vérifier si vous vous trouvez au-dessus d'une page de l'annuaire. p . C'est pourquoi vous devriez essayer de limiter la portée de l'élément utilisé dans delegate au plus petit élément statique qui contient tous les éléments dynamiques que vous voulez déléguer.

Answer 3

Le délégué est seulement plus rapide parce que vous n'avez pas à rechercher d'éléments, si vous utilisez un sélecteur au lieu d'un élément, le délégué sera le plus lent.

<div>
<p>test</p>
</div>

$('p').on('click',$.noop);
$('p').click($.noop);
$('div').delegate("p", "click",$.noop);

http://jsperf.com/test-on-click-delegate/3