22 suggestions sur l'optimisation des performances jquery

Tout d'abord, gardez à l'esprit que jQuery est du javascript. Cela signifie que nous devons adopter les mêmes conventions de codage, guides de style et meilleures pratiques.

Tout d'abord, si vous êtes un débutant en javascript, je vous recommande de lire "24 meilleures pratiques JavaScript pour les débutants". Il s'agit d'un didacticiel javascript de haute qualité. Il est préférable de le lire avant de vous lancer dans jQuery.

Lorsque vous êtes prêt à utiliser jQuery, je vous recommande fortement de suivre ces directives :

1.Cache les variables

La traversée du DOM coûte cher, alors essayez de mettre en cache les éléments réutilisés.

Copier le code Le code est le suivant :

//Oups
h=$ ('#élément').hauteur();
$('#élément').css('hauteur',h-20);

Copier le code Le code est le suivant :

//Suggestion
$element= $(' #element');
h=$element.height();
$element.css('height',h-20);

2. Évitez les variables globales

jQuery Comme pour javascript, en général, il est préférable de s'assurer que vos variables sont dans la portée de la fonction.

Copier le code Le code est le suivant :

//Oups
$element= $(' #element');
h=$element.height();
$element.css('height',h-20);

Copier le code Le code est le suivant :

//Suggestion
var $element =$( '#element');
var h=$element.height();
$element.css('height',h-20);

3. Utiliser la nomenclature hongroise

Ajoutez le préfixe $ devant les variables pour identifier facilement les objets jQuery.

Copier le code Le code est le suivant :

//Oups
var first= $(' #first');
var second=$('#second');
var value=$first.val();

Copier le code Le code est le suivant :

// Suggestion - Préfixez l'objet jQuery avec $ 
var $first=$('#first');
var $second=$('#second'),
var value=$first.val();

4. Utiliser la chaîne var (mode var unique)

Pour combiner plusieurs instructions var en une seule instruction, je recommande de mettre les variables non attribuées à la fin.

Copier le code Le code est le suivant :

var
 $first=$( '#first '),
 $second=$('#second'),
 value=$first.val(),
 k=3,
 cookiestring='SOMECOOKIESPLEASE',
 je, 
 j,
 myArray={};

5. Veuillez utiliser « on »

Dans la nouvelle version de jQuery, le plus court on("click") est utilisé pour remplacer des fonctions comme click(). Dans les versions précédentes, on() était bind(). Depuis jQuery 1.7, on() est la méthode préférée pour attacher des gestionnaires d'événements. Cependant, par souci de cohérence, vous pouvez simplement utiliser la méthode on() ensemble.

Copier le code Le code est le suivant :

//Oups
$first. click(function (){
$first.css('border','1px solid red');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('border','1px solid red');
})

Copier le code Le code est le suivant :

// Suggestion
$first. on(' click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
} )

$first.on('hover',function(){
$first.css('border','1px solid red');
})

6. Simplifiez le javascript

En général, il est préférable de combiner les fonctions autant que possible.

Copier le code Le code est le suivant :

//Oups
$first. click(function (){
 $first.css('border','1px solid red');
 $first.css('color','blue');
});

Copier le code Le code est le suivant :

//Suggestion
$first. on(' click',function(){
 $first.css({
 'border':'1px solid red',
 'color':'blue'
 });
}) ;

7. Fonctionnement de la chaîne

Il est très simple d'implémenter des opérations de chaînage de méthodes dans jQuery. Profitez-en ci-dessous.

Copier le code Le code est le suivant :

//Oups
$second. html(value );
$second.on('click',function(){
 alert('bonjour tout le monde');
});
$second.fadeIn('slow') ;
$second.animate({height:'120px'},500);

Copier le code Le code est le suivant :

//Suggestion
$second. html(value );
$second.on('click',function(){
 alert('bonjour tout le monde');
}).fadeIn('slow').animate({hauteur : '120px'},500);

8. Maintenir la lisibilité du code

En plus de rationaliser le code et d'utiliser le chaînage, le code peut devenir difficile à lire. L’ajout de pincements et de sauts de ligne peut faire des merveilles.

Copier le code Le code est le suivant :

//Oups
$second. html(value );
$second.on('click',function(){
 alert('bonjour tout le monde');
}).fadeIn('slow').animate({hauteur : '120px'},500);

Copier le code Le code est le suivant :

//Suggestion
$second. html(value );
$second
 .on('click',function(){ alert('bonjour tout le monde');})
 .fadeIn('slow')
 .animate( {hauteur : '120px'},500);

9. Sélectionnez l'évaluation du court-circuit

L'évaluation de court-circuit est une expression qui est évaluée de gauche à droite, à l'aide des opérateurs && (ET logique) ou || (OU logique).

Copier le code Le code est le suivant :

//Oups
function initVar( $maVar) {
 if(!$maVar) {
 $maVar=$('#selector');
 }
}

Copier le code Le code est le suivant :

//Suggestion
fonction initVar( $maVar) {
$maVar=$maVar || $('#selector');
}

10. Sélectionnez le raccourci

Une façon de rationaliser votre code consiste à tirer parti des raccourcis de codage.

[code]
//Oups
if(collection.length > 0){..}

Copier le code Le code est le suivant :

//Suggestion
if(collection .longueur) {..}

11. Séparer les éléments lors d'opérations lourdes

Si vous prévoyez d'effectuer de nombreuses opérations sur les éléments DOM (définir successivement plusieurs attributs ou styles CSS), il est recommandé de détacher d'abord les éléments puis de les ajouter.

Copier le code Le code est le suivant :

//Oups
var
$container=$("#container"),
$containerLi=$("#container li"),
$element=null;

$element=$containerLi.first();
//... De nombreuses opérations complexes

Copier le code Le code est le suivant :

//Suggestion
var
$container =$("#container"),
$containerLi=$container.find("li"),
$element=null;

$element=$containerLi.first().detach();
//... De nombreuses opérations complexes

$container.append($element);

12. Mémoriser les compétences

Vous n'avez peut-être pas d'expérience dans l'utilisation des méthodes dans jQuery, assurez-vous de consulter la documentation, il existe peut-être un moyen meilleur ou plus rapide de l'utiliser.

Copier le code Le code est le suivant :

//Oups
$(' #id' ).data(clé,valeur);

Copier le code Le code est le suivant :

// Suggestion (efficace) 
 $.data ('#id', clé, valeur);

13. Éléments parents mis en cache à l'aide de sous-requêtes

Comme mentionné précédemment, la traversée du DOM est une opération coûteuse. Une approche typique consiste à mettre en cache les éléments parents et à réutiliser ces éléments mis en cache lors de la sélection des éléments enfants.

Copier le code Le code est le suivant :

//Oups
var
 $container =$('#container'),
 $containerLi=$('#container li'),
 $containerLiSpan=$('#container li span');

Copier le code Le code est le suivant :

// Suggestion (efficace) 
 var
 $container=$('#container '),
 $containerLi=$container.find('li'),
 $containerLiSpan= $containerLi.find('span');
 

14. Évitez les sélecteurs universels

Mettre le sélecteur universel dans un sélecteur descendant a des performances terribles.

Copier le code Le code est le suivant :

//Oups
$(' .conteneur > ; *');

Copier le code Le code est le suivant :

//Suggestion
$(' .container' ).children();

15. Évitez les sélecteurs universels implicites

Les sélecteurs universels sont parfois implicites et difficiles à détecter.

Copier le code Le code est le suivant :

//Oups
$(' .someclass: radio');

Copier le code Le code est le suivant :

//Suggestion
$(' .someclass input :radio');

16. Sélecteur d'optimisation

Par exemple, le sélecteur d'identifiant doit être unique, il n'est donc pas nécessaire d'ajouter des sélecteurs supplémentaires.

Copier le code Le code est le suivant :

//Oups
$(' div#myid ');
$('div#footer a.myLink');

Copier le code Le code est le suivant :

// Suggestion
$(' #monid' );
$('#footer .myLink');

17. Évitez les sélecteurs d'identification multiples

Il est souligné ici que le sélecteur d'ID doit être unique, qu'il n'est pas nécessaire d'ajouter des sélecteurs supplémentaires et qu'il n'est pas nécessaire d'avoir plusieurs sélecteurs d'ID descendants.

Copier le code Le code est le suivant :

//Oups
$(' #extérieur #intérieur');

Copier le code Le code est le suivant :

//Suggestion
$(' #intérieur' );

18. S'en tenir à la dernière version

Les nouvelles versions sont généralement meilleures : plus légères et plus efficaces. Évidemment, vous devez considérer la compatibilité du code que vous souhaitez prendre en charge. Par exemple, la version 2.0 ne prend pas en charge Internet Explorer 6/7/8.

19. Abandonner les méthodes obsolètes

Il est très important de faire attention aux méthodes obsolètes à chaque nouvelle version et d'essayer d'éviter d'utiliser ces méthodes.

Copier le code Le code est le suivant :

//Oups - le live a été abandonné 
$( '#stuff').live('click',function() {
 console.log('hourra');
});

Copier le code Le code est le suivant :

// Suggestion
$(' #stuff' ).on('click',function() {
 console.log('hooray');
});
// Remarque : cela peut être inapproprié, cela devrait être en direct peut réaliser une liaison en temps réel, le délégué peut être plus approprié

20. Utiliser le CDN

Le CND de Google garantit que le cache le plus proche de l'utilisateur est sélectionné et répond rapidement. (Veuillez rechercher l'adresse vous-même lorsque vous utilisez Google CND. L'adresse ici ne peut pas être utilisée. Nous recommandons le CDN fourni par le site officiel de jquery).

21. Combinez le code natif jQuery et javascript si nécessaire

Comme mentionné ci-dessus, jQuery est javascript, ce qui signifie que tout ce que vous pouvez faire avec jQuery peut également l'être avec du code natif. Le code natif (ou vanilla) peut être moins lisible et maintenable que jQuery, et le code est plus long. Mais cela signifie aussi plus efficace (généralement plus le code sous-jacent est proche, moins il est lisible, plus les performances sont élevées, par exemple : l'assemblage, qui nécessite bien sûr des personnes plus puissantes). Gardez à l'esprit qu'aucun framework ne peut être plus petit, plus léger et plus efficace que le code natif (remarque : le lien de test n'est plus valide, vous pouvez rechercher le code de test en ligne).

Compte tenu des différences de performances entre vanilla et jQuery, je recommande fortement de tirer le meilleur parti des deux et d'utiliser (si possible) du code natif équivalent à jQuery.

22. Dernier conseil

Enfin, j'ai enregistré cet article dans le but d'améliorer les performances de jQuery et quelques autres bonnes suggestions. Si vous souhaitez approfondir ce sujet, vous y trouverez beaucoup de plaisir. N'oubliez pas que jQuery n'est pas obligatoire, juste une option. Réfléchissez à la raison pour laquelle vous souhaitez l'utiliser. Manipulation du DOM ? ajax ? pochoir? des animations CSS ? Ou un moteur sélecteur ? Peut-être qu'un microframework javascript ou une version personnalisée de jQuery serait un meilleur choix.

22 suggestions sur l'optimisation des performances jquery_jquery