Comment écrire du code jQuery de haute qualité (problèmes de performances avec jquery)

Comment écrire du code jQuery de haute qualité (problèmes de performances avec jquery)_jquery

WBOY

Libérer： 2016-05-16 16:42:56

original

1255 Les gens l'ont consulté

1. Citez correctement jQuery

1. Essayez d'introduire jQuery avant la fin du corps, pas dans la tête.
2. Utilisez le CDN fourni par un tiers pour introduire jQuery. En même temps, veillez à introduire les fichiers jQuery locaux lorsque des problèmes surviennent lors de l'utilisation d'un CDN tiers. (Cela peut être ignoré pour les sites Web qui ont déjà utilisé le CDN. Maintenant que la bande passante des utilisateurs a été mise à niveau, cela peut être ignoré. Le mettre sur les machines d'autres personnes peut ne pas être stable)
3. Si le fichier de script est introduit avant , il n'est pas nécessaire d'écrire document.ready, car le DOM a déjà été chargé lorsque le code js est exécuté.

<body>
 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script>
</body>

Copier après la connexion

2. Optimiser le sélecteur jQuery

L'utilisation efficace et correcte des sélecteurs jQuery est la base d'une utilisation compétente de jQuery. La maîtrise des sélecteurs jQuery nécessite un certain temps. Nous devons prêter attention à l'utilisation des sélecteurs lorsque nous commençons à apprendre jQuery.

<div id="nav" class="nav">
 <a class="home" href="http://www.jb51.net">脚本之家</a>
 <a class="articles" href="http://www.jb51.net/list/list_172_1.htm">jQuery教程</a>
</div>

Copier après la connexion

Si nous sélectionnons un élément avec classe comme home, nous pouvons utiliser le code suivant :

$('.home'); //1
$('#nav a.home'); //2
$('#nav').find('a.home'); //3

Copier après la connexion

1. La méthode 1 amènera jQuery à rechercher l'élément a avec la classe home dans l'ensemble du DOM, et les performances peuvent être imaginées.
2. La méthode 2 ajoute du contexte à l'élément à rechercher. Ici, il est modifié pour rechercher le sous-élément avec l'identifiant nav. Les performances de recherche ont été grandement améliorées.
3. La méthode 3 utilise la méthode find, qui est plus rapide, la méthode 3 est donc la meilleure.

Concernant la priorité de performances des sélecteurs jQuery, les sélecteurs d'ID sont plus rapides que les sélecteurs d'éléments, et les sélecteurs d'éléments sont plus rapides que les sélecteurs de classe. Étant donné que les sélecteurs d'ID et les sélecteurs d'éléments sont des opérations JavaScript natives, mais pas les sélecteurs de classe, vous pouvez examiner la différence entre le contexte de recherche et les enfants find().

3. Mise en cache des objets jQuery

La mise en cache des objets jQuery peut réduire les recherches inutiles dans le DOM. Sur ce point, vous pouvez vous référer à la mise en cache des objets jQuery pour améliorer les performances.

4. Utilisation correcte de la délégation événementielle
La délégation d'événements peut améliorer l'exécution des événements. La liaison d'événements sur des éléments ajoutés dynamiquement nécessite également une délégation. Dans la nouvelle version de jQuery, il est recommandé d'utiliser on pour lier un ou plusieurs traitements d'événements à des éléments.

<table id="t">
 <tr>
  <td>我是单元格</td>
 </tr>
</table>

Copier après la connexion

Par exemple, si nous voulons lier un événement de clic à la cellule supérieure, un ami occasionnel peut l'écrire comme suit :

$('#t').find('td').on('click', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

Copier après la connexion

Cela liera les événements à chaque td. Dans le test de liaison des événements de clic à 100 cellules, la différence de performances entre les deux peut atteindre 7 fois. Une bonne pratique devrait être d'écrire ce qui suit :

$('#t').on('click', 'td', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

Copier après la connexion

5. Rationalisez le code jQuery
Par exemple, dans le code ci-dessus, nous avons fusionné de manière appropriée le code jQuery, et de même la méthode .attr(), etc., mais nous ne l'avons pas écrit de la manière suivante :

$('#t').on('click', 'td', function () {
 $(this).css('color', 'red').css('background', 'yellow');
});

Copier après la connexion

6. Réduire les opérations DOM
Lorsque vous commencez à utiliser jQuery, vous pouvez fréquemment utiliser le DOM, ce qui est assez consommateur de performances. Si nous voulons afficher dynamiquement un tableau dans le corps, certains amis écriront comme ceci :

var $t = $('body');
$t.append('<table>');
$t.append('<tr><td>1</td></tr>');
$t.append('</table>');

Copier après la connexion

Bonnes pratiques :

$('body').append('<table><tr><td>1</td></tr></table>');

Copier après la connexion

De cette façon, une fois la chaîne de table épissé puis ajoutée au corps, l'opération DOM ne doit être effectuée qu'une seule fois. Un ami du groupe avait des problèmes lors de la sortie sous IE à cause de cela. Concernant l'épissage des chaînes, vous pouvez vous référer au moyen le plus rapide de créer une chaîne.

7. N'utilisez pas jQuery

Les fonctions natives sont toujours les plus rapides. Ce n'est pas difficile à comprendre. Il ne faut pas oublier le JS natif lors de l'écriture du code.

Résumons d’abord ces suggestions. Chaque suggestion n’est pas difficile à comprendre, mais il faudra quand même beaucoup de temps pour la résumer de manière exhaustive. Par exemple, dans le segment de code réduit, si vous avez besoin d'obtenir un nouveau tableau à partir d'un tableau en fonction de conditions, vous pouvez utiliser la méthode $.grep() si vous avez vos propres conseils lors de l'utilisation de jQuery. , veuillez laisser un commentaire, partagez-le avec tout le monde !

Voici les ajouts d'autres internautes :

Attention à ajouter le mot-clé var lors de la définition des variables jQuery
Il ne s'agit pas seulement de jQuery, mais il faut également y prêter attention dans tous les processus de développement javascript. Veuillez ne pas le définir comme suit :

$loading = $('#loading'); //Il s'agit d'une définition globale. Si vous faites accidentellement référence au même nom de variable quelque part, vous serez déprimé à mort

Veuillez utiliser une variable pour définir les variables
Si vous utilisez plusieurs variables, veuillez les définir comme suit :

Copier le code Le code est le suivant :

var page = 0,

$chargement = $('#chargement'),

$corps = $('corps');

N'ajoutez pas de mot-clé var à chaque variable, sauf si vous souffrez d'un trouble obsessionnel-compulsif grave
Définir les variables jQuery
Lorsque vous déclarez ou définissez des variables, n'oubliez pas que si vous définissez une variable jQuery, veuillez ajouter un symbole $ devant la variable, comme suit :

var$loading = $('#loading');

L'avantage de le définir ainsi est que vous pouvez efficacement rappeler à vous-même ou aux autres utilisateurs qui lisent votre code qu'il s'agit d'une variable jQuery.

N'oubliez pas de mettre en cache lors de l'utilisation du DOM

Dans le développement de code jQuery, nous devons souvent faire fonctionner le DOM. Le fonctionnement du DOM est un processus très consommateur de ressources, et de nombreuses personnes aiment souvent utiliser jQuery comme ceci :

Copier le code Le code est le suivant :

$('#loading').html('Complete');

$('#loading').fadeOut();

Il n'y a rien de mal avec le code, et vous pouvez l'exécuter normalement et obtenir des résultats, mais veuillez noter que chaque fois que vous définissez et appelez $('#loading'), vous créez en fait une nouvelle variable si vous en avez besoin. réutilisez-le, pensez à le définir dans une variable, afin que le contenu de la variable puisse être efficacement mis en cache, comme suit :

Copier le code Le code est le suivant :

var $loading = $('#loading');

$loading.html('Finished');$loading.fadeOut();

Les performances seront meilleures de cette façon.

Utiliser les opérations en chaîne

Nous pouvons écrire l'exemple ci-dessus de manière plus concise :

Copier le code Le code est le suivant :

var $loading = $('#loading');

$loading.html('Finished').fadeOut();

Rationaliser le code jQuery

Essayez d'intégrer certains codes ensemble, merci de ne pas coder comme ceci :

Copier le code Le code est le suivant :

//! ! Méchant $button.click(function(){

$target.css('width','50%');

$target.css('border','1px solid #202020');

$target.css('color','#fff');

});

devrait s'écrire ainsi :

Copier le code Le code est le suivant :

$bouton.clic(fonction(){

$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});

});

Évitez d'utiliser des sélecteurs de type globaux

Veuillez ne pas écrire de la manière suivante : $('.something > *');
Il vaut mieux écrire comme ceci : $('.something').children();

Ne chevauchez pas plusieurs identifiants

Veuillez ne pas écrire comme suit : $('#something #children');
Cela suffit : $('#children');

Utilisez le jugement logique || ou && pour accélérer

Merci de ne pas écrire comme suit :

Copier le code Le code est le suivant :

si(!$quelque chose) {

$quelque chose = $('#quelque chose ');

>

Les performances d'écriture sont meilleures de cette façon :

$quelque chose= $quelque chose|| $('#quelque chose');

Utilisez le moins de code possible

Au lieu d'écrire comme ceci : if(string.length > 0){..}

Il vaut mieux l'écrire comme ceci : if(string.length){..}

Essayez d'utiliser la méthode .on
Si vous utilisez une version plus récente de la bibliothèque de classes jQuery, veuillez utiliser .on. Toutes les autres méthodes sont finalement implémentées à l'aide de .on.

Essayez d'utiliser la dernière version de jQuery
La dernière version de jQuery a de meilleures performances, mais la dernière version peut ne pas prendre en charge ie6/7/8, vous devez donc choisir en fonction de la situation réelle.

Essayez d'utiliser Javascript natif
Si les fonctions fournies par jQuery peuvent également être implémentées en Javascript natif, il est recommandé d'utiliser du JavaScript natif pour l'implémenter.