Optimisation des performances de JQuery teaching

jQuery est un très excellent framework javascript. Lorsque nous utilisons jQuery, nous ne voulons jamais revenir au long code javascript, donc l'optimisation de jQuery est devant nous. Alors, par quels aspects devrions-nous commencer lors de l’optimisation de JQuery ?

1. Utilisez la dernière version de jQuery

La nouvelle version présentera des améliorations de performances par rapport à l'ancienne version, ainsi que l'ajout de nouvelles fonctionnalités.

2. Utilisation des sélecteurs

Nous utilisons généralement des sélecteurs d'identifiant, des sélecteurs de classe, des sélecteurs d'éléments, des sélecteurs de pseudo-classe et des sélecteurs d'éléments. Ma suggestion lors de son utilisation est qu'il est préférable d'utiliser le sélecteur d'identifiant, suivi du sélecteur de classe >

Lorsqu'on parle de sélecteurs, il est nécessaire d'insérer une phrase si cela n'est pas nécessaire. Lorsque vous utilisez un sélecteur pour rechercher, il est préférable de commencer par l'élément parent avec l'identifiant et de rechercher vers le bas étape par étape.

3. N'utilisez pas jQuery de manière excessive

Retenez une phrase : le natif est le plus rapide. jQuery, c'est écrire moins, faire plus (écrire moins, faire plus).

4. Faites un bon travail de mise en cache

Si vous souhaitez réutiliser un nœud, vous pouvez utiliser une variable pour le stocker et le rappeler lors de son utilisation. Évitez d'acquérir des nœuds à plusieurs reprises et de réduire l'efficacité.

Copier le code Le code est le suivant :

var inputSelect = $("#head . head_right input" );
inputSelect.find("a");
inputSelect.find("i");

5. Utiliser les opérations en chaîne

L'un des points forts de jQuery est qu'il peut utiliser des opérations en chaîne.

Copier le code Le code est le suivant :

$("#content").find (". div").eq(2).html("Bonjour tout le monde");

6. Délégation événementielle

Lorsque plusieurs éléments frères sont requis pour exécuter un type d'événement, la délégation d'événement peut être utilisée. Exemple :

Copier le code Le code est le suivant :

;div>

Lorsque chaque div avec class="div" a un événement de clic, nous pouvons utiliser la délégation d'événement,

Copier le code

Le code est le suivant :$("#content").on ("cliquez sur ","div",function(){ $(this).css("color","#ff5500");

});

7. Gérer correctement les boucles

Le bouclage est une opération qui prend du temps. Si vous pouvez utiliser un sélecteur pour sélectionner directement des éléments, n'utilisez pas de boucles pour parcourir les éléments un par un.

Les méthodes natives de Javascript for et while sont plus rapides que each() de jQuery. Par conséquent, les méthodes natives doivent être utilisées en premier.

8. Réduire la génération d'objets JQuery

La génération d'un objet Query générera les propriétés et méthodes correspondantes, ce qui consomme plus de ressources. Essayez donc de réduire la génération d'objets jQuery.

9. Portée des variables

Lorsqu'une variable n'est pas nécessaire dans plusieurs appels de fonction, la variable doit être placée dans la fonction pour réduire le temps de recherche du code lorsque le code est exécuté.

10. Différer certaines fonctions à l'exécution de $(window).load

$(document).ready est vraiment simple à utiliser, mais il peut être exécuté avant que d'autres éléments ne soient téléchargés lors du rendu de la page.

11. Fusion de scripts

Les scripts sont chargés un par un, réduire le nombre de scripts peut également améliorer l'efficacité.

12. Encapsulation des éléments

Lors de l'insertion de contenu dans un nœud, vous pouvez d'abord encapsuler le contenu, puis l'insérer.

Copier le code Le code est le suivant :

var content = "";
 $(" #head").html(content);

L'autre consiste à compresser les fichiers js.

À mesure que jQuery continue d'être utilisé, de plus en plus de méthodes d'optimisation seront découvertes.

Étiquettes associées：

jquery 性能优化

source：php.cn

Article précédent：La couche contextuelle js native et la fenêtre à l'intérieur sont centrées_javascript skills Article suivant：js obtient une hauteur et une largeur de page compatibles avec, par exemple, Firefox Chrome, etc._javascript skills

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur