38 suggestions pour l'optimisation des performances jQuery_jquery

1. Faites attention à l'ajout du mot-clé var lors de la définition des variables jQuery
Ceci n'est pas seulement jQuery, mais doit également être pris en compte dans tous les processus de développement javascript. 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
2. S'il vous plaît. utilisez 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,
$loading = $('#loading'),
$body = $('body');

Ne l'ajoutez pas à chaque variable Un mot-clé var, sauf si vous souffrez d'un trouble obsessionnel-compulsif grave
3. Définissez les variables jQuery en ajoutant le symbole $
Lorsque vous déclarez ou définissez des variables, n'oubliez pas que si vous définissez une variable jQuery, veuillez ajouter un signe $ devant la variable, comme suit :

Copiez le code Le le code est le suivant :

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

L'avantage de le définir ainsi est que vous pouvez efficacement le rappeler à vous-même ou aux autres utilisateurs qui lisent votre code qu'il s'agit d'une variable jQuery.
4. N'oubliez pas le cache lors de l'utilisation du DOM
Dans le développement de code jQuery, nous avons souvent besoin d'utiliser le DOM. L'opération est un processus très gourmand en ressources, et souvent de nombreuses personnes aiment l'utiliser. jQuery comme ceci :

Copiez le code Le code est le suivant :

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

Il n'y a aucun problème avec le code Vous pouvez également l'exécuter normalement et obtenir des résultats, mais soyez prudent à chaque fois que vous la définissez. Et lors de l'appel de $('#loading'), une nouvelle variable est effectivement créée. Si vous devez la réutiliser, pensez à la définir dans une variable, afin que le contenu de la variable puisse être efficacement créé. mis en cache, comme suit :

Copier le code Le code est le suivant :

var $loading = $(' #loading');
$loading. html('Finished');$loading.fadeOut();

Cela fonctionnera mieux.
5. Utiliser les opérations en chaîne
Pour l'exemple ci-dessus, nous pouvons l'écrire de manière plus concise :

Copier le code Le code est le suivant :

var $loading = $('#loading');
$loading.html('Complete').fadeOut();

6. Rationalisez le code jQuery
Essayez d'intégrer certains codes ensemble, veuillez 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');
});

doit être écrit comme ceci :

Copier le code Le code est le suivant :

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

7. Évitez d'utiliser des sélecteurs de type globaux
N'écrivez pas de la manière suivante : $('.something > *');
Il vaut mieux écrire de cette façon : $('.something').children();
8. Ne chevauchez pas plusieurs identifiants
Veuillez ne pas écrire comme suit : $('#something #children');
Cela suffit : $('#children');
9. Utilisez des jugements plus logiques || Ou && pour accélérer
N'écrivez pas comme suit :

Copiez le code Le code est le suivant :

if(!$something) {
$something = $('#something ');
}

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

Copier le code Le code est le suivant :

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

10. Essayez d'utiliser moins de code
Au lieu d'écrire comme ceci : if(string.length > 0){..}
Il est préférable d'écrire comme ceci : if (string.length) {..}
11. 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. finira par utiliser .on pour y parvenir.
12. 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 l'ajuster. selon la situation réelle Sélection de la situation.
13. Essayez d'utiliser du Javascript natif
Si les fonctions fournies par jQuery peuvent également être implémentées en utilisant du Javascript natif, il est recommandé d'utiliser du Javascript natif pour y parvenir.
14. Héritez toujours du sélecteur #id
C'est une règle d'or pour les sélecteurs jQuery. Le moyen le plus rapide de sélectionner un élément dans jQuery est de le sélectionner par ID.

Copier le code Le code est le suivant :

$('#content').hide();

Ou hériter du sélecteur d'ID pour sélectionner plusieurs éléments :

Copiez le code Le code est le suivant :

$('#content p').hide();

15. Utiliser la balise devant la classe
Le deuxième sélecteur le plus rapide dans jQuery est le sélecteur de balises (tel que $('head')), car il provient directement de la méthode Javascript native getElementByTagName(). Il est donc préférable de toujours utiliser des balises pour modifier les classes (et de ne pas oublier l'identifiant le plus proche)

Copier le code Le code est tel suit :

var recevoirNewsletter = $('#nslForm input.on');

Le sélecteur de classe dans jQuery est le plus lent car il traversera tous les nœuds DOM sous le navigateur IE. Essayez d'éviter d'utiliser des sélecteurs de classe. N'utilisez pas non plus de balises pour modifier les identifiants. L'exemple suivant parcourra tous les éléments div pour trouver le nœud avec l'identifiant 'content' :

Copier le code Le code est le suivant :

var content = $('div#content'); // Très lent, ne pas utiliser

Utiliser l'ID pour modifier l'ID est superflu :

Copier le code Le code est le suivant :

var traffic_light = $('#content #traffic_light'); n'utilisez pas

16. Utilisez la sous-requête
pour mettre en cache l'objet parent pour une utilisation future

Copier le code Le code est le suivant :

var header = $('#header');
var menu = header.find('.menu');
// ou
var menu = $('.menu', header);

17. sélecteur avec Convient au modèle "de droite à gauche" de Sizzle
Depuis la version 1.3, jQuery utilise la bibliothèque Sizzle, qui est très différente de la représentation de la version précédente sur le moteur de sélection. Il remplace le modèle « de droite à gauche » par un modèle « de gauche à droite ». Assurez-vous que le sélecteur le plus à droite est spécifique et que le sélecteur de gauche est large :

Copiez le code Le code est le suivant :

var linkContacts = $('.contact-links div.side-wrapper');

au lieu d'utiliser

Copier le code Le code est le suivant :

var linkContacts = $('a.contact-links .side-wrapper');

Utiliser find( ), il est en effet plus rapide de trouver la fonction
.find() sans utiliser de contexte. Mais si une page comporte de nombreux nœuds DOM, la recherche peut prendre plus de temps :

Copier le code Le code est le suivant suit :

var divs = $('.testdiv', '#pageBody'); // 2353 sur Firebug 3.6
var divs = $('#pageBody').find('.testdiv' ); // 2324 sur Firebug 3.6 - Le meilleur moment
var divs = $('#pageBody .testdiv'); // 2469 sur Firebug 3.6

19. Écrivez votre propre sélecteur
Si vous utilisez souvent des sélecteurs dans votre code, étendez l'objet $.expr[':'] de jQuery et écrivez votre propre sélecteur. Dans l'exemple suivant, j'ai créé un sélecteur au-dessus de la ligne de flottaison pour sélectionner les éléments invisibles :

Copier le code Le code est le suivant :

$.extend($.expr[':'], {
au-dessus de la ligne de flottaison : function(el) {
return $(el).offset().top < $(window) .scrollTop( ) $(window).height();
}
});
var nonVisibleElements = $('div:abovethefold'); // Sélectionnez l'élément

20. Cacher les objets jQuery
Cache les éléments que vous utilisez fréquemment :

Copier le code Le code est le suivant :

var header = $('#header');
var divs = header.find('div');
var form = header.find('form') ;

Lorsque l'insertion DOM doit être effectuée, encapsulez tous les éléments dans un seul élément

21. Le fonctionnement direct du DOM est très lent. Modifiez le moins possible la structure HTML.

Copier le code Le code est le suivant :

var menu = '< ul id= "menu">';
pour (var i = 1; i < 100; i ) {
menu = '

' i '

';
}
menu = '';
$('#header').prepend(menu);
// Ne faites jamais ça :
$('#header') . prepend('

');
for (var i = 1; i < 100; i ) {
$('#menu') . append('

' i '

');

}
22. Bien que jQuery ne lève pas d'exceptions, les développeurs doivent également inspecter les objets

Bien que jQuery ne lance pas un grand nombre d'exceptions aux utilisateurs, les développeurs ne devraient pas s'y fier. jQuery exécute généralement un tas de fonctions inutiles avant de déterminer si un objet existe. Ainsi, avant de faire une série de références à un objet, vous devez d'abord vérifier si l'objet existe.
Vingt-trois. Utilisez des fonctions directes au lieu de fonctions équivalentes
Pour de meilleures performances, vous devez utiliser des fonctions directes telles que $.ajax() au lieu d'utiliser $.get(), $. getJSON(), $.post(), car ces derniers appelleront $.ajax().
24. Mettez en cache les résultats de jQuery pour une utilisation ultérieure
Vous obtiendrez souvent un objet d'application javasript - vous pouvez utiliser App pour enregistrer les objets que vous sélectionnez souvent pour une utilisation future. Utilisation :
<.>

Copier le code Le code est le suivant :

App.hiddenDivs = $('div.hidden');
// Ensuite, appelez votre application :
App.hiddenDivs.find('span');

25. Utilisez la fonction interne de jQuery data( ) pour stocker l'état
N'oubliez pas d'utiliser la fonction .data() pour stocker les informations :

Copier le code Code comme suit :

$('#head').data('name', 'value');
// Appelez-le ensuite dans votre application :
$('# head'). data('name');

26. Utilisez la fonction utilitaire jQuery
N'oubliez pas la fonction utilitaire jQuery simple et pratique. Mes favoris sont $.isFunction(), $isArray() et $.each().
Vingt-sept. Ajoutez la classe "JS" au bloc HTML
Lorsque jQuery est chargé, ajoutez d'abord une classe appelée "JS" au HTML

Copier le code Le code est le suivant :

$('HTML').addClass('JS');

Uniquement lorsque l'utilisateur Vous ne pouvez ajouter des styles CSS que lorsque JavaScript est activé. Par exemple :

Copier le code Le code est le suivant :

/* en css*/

.JS # maDiv{display:none;}

Ainsi, lorsque JavaScript est activé, vous pouvez masquer tout le contenu HTML et utiliser jQuery pour réaliser ce que vous voulez (par exemple : réduire certains panneaux ou les développer lorsque l'utilisateur clique dessus). Lorsque Javascript n'est pas activé, le navigateur affiche tout le contenu et les robots des moteurs de recherche suppriment également tout le contenu. J'utiliserai davantage cette technique à l'avenir.
28. Reportez-vous à $(window).load
Parfois, $(window).load() est plus rapide que $(document).ready() car ce dernier est exécuté avant tous les éléments du DOM. ont été téléchargés. Vous devriez le tester avant de l'utiliser.
29. Utiliser la délégation d'événement
Lorsque vous avez de nombreux nœuds dans un conteneur et que vous souhaitez lier un événement à tous les nœuds, la délégation est très adaptée à de tels scénarios d'application. En utilisant la délégation, il nous suffit de lier l'événement au parent, puis de voir quel nœud enfant (nœud cible) a déclenché l'événement. Cela devient très pratique lorsque vous avez une table avec beaucoup de données et que vous souhaitez définir des événements sur le nœud td. Récupérez d'abord la table, puis définissez les événements de délégation pour tous les nœuds td :

Copier le code Le code est le suivant :

$ ("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});

30. Utilisez l'abréviation d'événement ready
Si vous souhaitez compresser le plug-in js et enregistrer chaque octet, vous devez éviter d'utiliser $(document).onready()

Copier le code Le code est le suivant :

// Ne pas utiliser
$(document).ready(function ( ){
// Code
});
// Vous pouvez l'abréger comme ceci :
$(function (){
// Code
});

31. Tests unitaires jQuery
La meilleure façon de tester le code JavaScript est de demander aux gens de le tester. Mais vous pouvez utiliser certains outils automatisés tels que Selenium, Funcunit, QUit, QMock pour tester votre code (notamment les plug-ins). Je souhaite aborder ce sujet dans un autre sujet car il y a tellement de choses à dire.
TroisDouze. Standardisez votre code jQuery
Standardisez souvent votre code pour voir quelle requête est la plus lente et remplacez-la. Vous pouvez utiliser la console Firebug. Vous pouvez également utiliser les fonctions de raccourci de jQuery pour faciliter les tests :

Copiez le code Le code est le suivant :

// Raccourci pour enregistrer les données dans la console Firebug
$.l($('div'));

// Obtenir l'horodatage UNIX
$.time();

// Enregistrer le temps d'exécution du code dans Firebug
$.lt();
$('div');
$.lt();

// Mettez le bloc de code dans une boucle for pour tester le temps d'exécution
$.bm("var divs = $('.testdiv', '#pageBody');" // 2353 sur Firebug 3.6

33. Utiliser HMTL5
Le nouveau standard HTML5 apporte une structure DOM plus légère. Une structure plus légère signifie que moins de parcours sont nécessaires lors de l'utilisation de jQuery et de meilleures performances de chargement. Veuillez donc utiliser HTML5 si possible.
34. Si vous souhaitez ajouter des styles à plus de 15 éléments, ajoutez des balises de style directement aux éléments du DOM
Pour ajouter des styles à quelques éléments, le meilleur moyen est d'utiliser jQuey css. () fonction. Cependant, lors de l'ajout de styles à plus de 15 éléments, il est plus efficace d'ajouter des balises de style directement dans le DOM. Cette méthode évite d'utiliser du code en dur dans le code.

Copier le code Le code est le suivant :

$('')
.appendTo('head');

35. Évitez de charger du code redondant
C'est une bonne idée de mettre du code Javascript dans différents fichiers et de ne les charger qu'en cas de besoin. De cette façon, vous ne chargerez pas de code et de sélecteurs inutiles. Il est également facile de gérer le code.
36. Compressez dans un fichier JS principal et maintenez le nombre de téléchargements au minimum
Lorsque vous avez déterminé quels fichiers doivent être chargés, regroupez-les dans un seul fichier. Utilisez certains outils open source pour le faire automatiquement pour vous, comme l'utilisation de Minify (intégré à votre code back-end) ou l'utilisation d'outils en ligne tels que JSCompressor, YUI Compressor ou le packer Dean Edwards JS pour compresser les fichiers pour vous. Mon préféré est JSCompressor.
37. Utilisez Javascript natif si nécessaire
Utiliser jQuery est une bonne chose, mais n'oubliez pas que c'est aussi un framework pour Javascript. Vous pouvez ainsi utiliser des fonctions Javascript natives lorsque cela est nécessaire dans le code jQuery, ce qui permet d'obtenir de meilleures performances.
38. Le chargement paresseux du contenu pour la vitesse et les avantages du référencement améliore non seulement la vitesse de chargement, mais améliore également l'optimisation du référencement (Contenu de chargement paresseux pour la vitesse et les avantages du référencement)
Utilisez Ajax pour charger votre site Web. , cela peut réduire le temps de chargement côté serveur. Vous pouvez commencer avec un widget de barre latérale commun.