méthode d'optimisation jq

1. Utiliser l'écriture en chaîne

2.事件的委托处理（Event Delegation）

Le modèle d'événement JavaScript adopte le mode "bulle", c'est-à-dire que les événements des éléments enfants "bouillonneront" vers le haut étape par étape et deviendront les éléments parents.

En profitant de cela, la liaison d'événements peut être grandement simplifiée. Par exemple, il y a un tableau (élément table) contenant 100 cellules (élément td). Maintenant,

nécessite de lier un événement de clic (clic) à chaque cellule. Avez-vous besoin d'exécuter la commande suivante ? fois?

<span style="font-size: 15px">$("td").on("click", function(){
$(this).toggleClass("click");
});<br/>回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，<br/>这个事件会"冒泡"到父元素table上面，从而被监听到。<br/>因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。<br/>这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。<br/></span>

<span style="font-size: 15px">$("table").on("click", "td", function(){ $(this).toggleClass("click"); });<br/></span>

3. Utilisez le bon sélecteur

(1) Le sélecteur le plus rapide : le sélecteur d'identifiant et le sélecteur d'étiquette d'élément

Rencontrez-les Lors de la sélection d'un sélecteur, jQuery appellera automatiquement les méthodes natives du navigateur (telles que getElementById()), afin qu'elles s'exécutent rapidement.

(2) Sélecteur plus lent : les performances du sélecteur de classe

　$('.className') dépendent des différents navigateurs.

Les navigateurs Firefox, Safari, Chrome et Opera ont tous des méthodes natives getElementByClassName(), donc la vitesse n'est pas lente. Cependant, IE5-IE8

ne déploient pas cette méthode, donc ce sélecteur sera assez lent dans IE.

4. La relation entre les éléments enfants et les éléments parents

<span style="font-size: 15px">$(&#39;.child&#39;, $parent)

$parent.find(&#39;.child&#39;)

$parent.children(&#39;.child&#39;)

$(&#39;#parent > .child&#39;)

$(&#39;#parent .child&#39;)

$(&#39;.child&#39;, $(&#39;#parent&#39;))<br/></span>

(1) $('.child', $parent)·

Cette instruction signifie, étant donné un objet DOM, puis en sélectionner un élément enfant. jQuery convertira automatiquement cette instruction en $.parent.find('child'),

, ce qui entraînera une certaine perte de performances. Il est 5 à 10 % plus lent que la forme la plus rapide.

(2) $parent.find('.child')

C'est la déclaration la plus rapide. La méthode .find() appellera les méthodes natives du navigateur (getElementById, getElementByName, getElementByTagName

, etc.), elle est donc plus rapide.

(3) $parent.children('.child')

Cette déclaration est dans jQuery, Will utilisez $.sibling() et la méthode nextSibling() de javascript pour parcourir les nœuds un par un. Il est environ 50 % plus lent que la forme la plus rapide.

(4) $('#parent > .child')

jQuery utilise le moteur Sizzle en interne . Gérer divers sélecteurs. L'ordre de sélection du moteur Sizzle est de droite à gauche, donc cette instruction sélectionne d'abord .child, puis filtre l'élément parent #parent un par un

, ce qui en résulte étant le plus rapide, le formulaire est environ 70 % plus lent.

(5) $('#parent .child')

Cette déclaration est la même que la précédente une situation. Cependant, la précédente ne sélectionne que des sous-éléments directs, tandis que celle-ci peut sélectionner des sous-éléments à plusieurs niveaux, elle est donc plus lente

est environ 77 % plus lente que la forme la plus rapide. .

(6) $('.child', $('#parent'))

jQuery interne Cette instruction sera convertie en $('#parent').find('.child'), qui est 23 % plus lent que la forme la plus rapide.

Donc, le meilleur choix est $parent.find('.child'). De plus, comme $parent est souvent généré lors de l'opération précédente, jQuery le mettra en cache, donc l'ajout supplémentaire de

accélérera l'exécution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!