Contenu
- Commencer
- Accéder au DOM
- Construire des chaînes
- Méthode la plus rapide dans la plupart des cas:
- Accélérer les boucles
- Changer de:
- Ou alors:
- Éviter de:
- Appel de méthodes ou de propriétés sur des éléments de tableau
- Par example:
- ... est plus lent que:
- Variables locales et globales
- Conclusion
METTRE À JOUR: Voici une révision de mon article, prenant en compte les commentaires et les considérations de divers lecteurs au cours des derniers jours. Plutôt que de retirer cet article, je voulais avoir une chance de le rectifier avec les informations correctes. J'apprécie le temps et les efforts consacrés aux réponses. Nous vivons dans un environnement numérique et c’est formidable que cela soit possible; cela signifie que nous apprenons toujours.
JavaScript est devenu indispensable pour tous les dotcoms souhaitant offrir une expérience utilisateur riche, en particulier dans les projets vous obligeant à éviter Flash. Au fur et à mesure que la puissance du matériel grand public progresse, les limitations disparaissent, permettant à vos sites d'effectuer des tâches qui, il y a seulement quelques années, auraient mis un navigateur à l'arrêt. Néanmoins, l'optimisation du code est toujours vitale pour une expérience utilisateur transparente, je voudrais donc partager quelques règles simples qui peuvent réduire considérablement le temps nécessaire à l'exécution de votre JavaScript, en particulier dans les navigateurs plus anciens.
Beaucoup de ces optimisations peuvent ne pas être perceptibles si vous ne travaillez pas avec de grands ensembles de données vous obligeant à répéter une tâche plusieurs fois - mais même dans ce cas, je vous recommande de toujours respecter les consignes ci-dessous lorsque cela est possible. De cette façon, lorsque vous devez rationaliser votre JavaScript, une grande partie du travail sera déjà effectuée.
Il est également important de connaître votre public cible, en termes de navigateur (s) et d'appareil (s). Par exemple, dans certains cas, l'exécution de tests jsPerf (voir ci-dessous) sur mon iPhone ou iPad obtient des résultats complètement différents de ceux des navigateurs de bureau.
Commencer
La toute première chose à faire est de profiler votre JavaScript pour comprendre exactement quelles méthodes prennent beaucoup de temps à exécuter. Je recommanderais d'utiliser le profileur de Firebug (si vous ne savez pas ce qu'est Firebug, assurez-vous de le télécharger, de préférence pour Firefox, avant de continuer à lire cet article). Il est incroyablement facile à utiliser et vous pouvez rapidement profiler votre code sans nécessairement avoir de travail supplémentaire de votre part.
Il y a aussi jsPerf, qui est un moyen fantastique de créer et de partager des cas de test, bien que pas aussi rapide que le profileur de FireBug en termes d’obtention d’un instantané rapide.
Accéder au DOM
Il est fort probable que votre JavaScript accède au DOM, et en fait, il est plus que probable qu'il soit la cause de problèmes de performances. Il est très important de comprendre qu’il s’agit d’une tâche coûteuse, car le navigateur doit rendre l’écran à nouveau à chaque fois que le DOM a changé. J'essaierais d'abord de supprimer vos appels DOM pour évaluer à quel point ils coûtent cher avant de m'attaquer aux petites améliorations ci-dessous.
Dans la mesure du possible, il est plus rapide de manipuler le DOM en un seul grand appel, plutôt que de nombreux petits, ce qui réduit le nombre de fois que le navigateur doit se mettre à jour. Au lieu d'ajouter directement de nombreux éléments, essayez de les injecter dans un fragment de document, puis ajoutez le fragment dans votre document (en savoir plus sur les fragments de document).
La même chose peut être dite à propos de l'application de styles en ligne directement sur des éléments. Au lieu de cela, ajoutez et supprimez des classes pour réduire le temps de redistribution du navigateur.
Construire des chaînes
Les anciennes versions d'Internet Explorer (les versions 5-7: 8 n'affichent pas le même problème) deviennent de plus en plus lentes à mesure que votre chaîne est longue. Nous allons résoudre ce problème ci-dessous.
Notez que dans les navigateurs plus récents, vous ne verrez aucune amélioration. En fait, dans de nombreux cas, vous verrez le contraire - raison de plus pour profiler votre code pour voir si les avantages des navigateurs plus anciens l'emportent sur l'impact sur les nouvelles alternatives, et décider de quel public cible bénéficierait le plus.
Si vos chaînes sont courtes, respectez la première méthode illustrée ci-dessous.
Méthode la plus rapide dans la plupart des cas:
var string = ’abc’; string + = ’def’; string + = ’ghi’; string + = ’jkl’; chaîne + = ’mno’; alert (chaîne);
Essayez de faire cela pour les anciens navigateurs qui ont du mal à concaténer rapidement de grandes chaînes:
var string = ['abc ...', 'def ...', 'ghi ...', 'jkl ...', 'mno ...']; alert (string.join ("")) ;
Accélérer les boucles
En réorganisant simplement les boucles pour, vous pouvez tirer un peu plus de performances de votre code.
Changer de:
for (var i = 0; i my_array.length; i ++) {}
Ou alors:
pour (var i = 0; i maMéthode (); i ++) {}
Au lieu de cela, essayez ce changement subtil:
for (var i = 0, len = my_array.length; i len; i ++) {}
Ou alors:
var len = maMéthode (); for (var i = 0; i len; i ++) {}
Raymond Julin a gentiment mis en place un cas de test jsPerf afin que vous puissiez voir la différence vous-même. Dans pratiquement tous les navigateurs, vous pouvez voir un bon gain de performances.
Assurez-vous qu'il n'y a pas d'appels de fonction inutiles dans vos boucles. Si vous pouvez le faire une fois, en dehors de la boucle, c'est généralement une bonne idée de le faire. Le gain de performance dépendra du coût de la fonction.
Éviter de:
for (var i = 0, len = my_array.length; i len; i ++) {var response = goDoSomething ();}
Si cela vous convient, essayez:
var response = goDoSomething (); for (var i = 0, len = my_array.length; i len; i ++) {}
Une autre optimisation à prendre en compte, lorsque vous ne dépendez pas de l’ordre de la boucle, consiste à décrémenter à la place:
var i = my_array.length; alors que je-- ) { }
J'utiliserais cette dernière méthode avec parcimonie: ce n'est pas la façon la plus logique de boucler et pourrait rendre la tâche plus difficile pour les autres programmeurs qui ont besoin de comprendre votre code, mais cela pourrait toujours être utile dans le bon scénario.
Appel de méthodes ou de propriétés sur des éléments de tableau
Si vous accédez plusieurs fois à des propriétés ou à des méthodes sur des éléments d’un tableau, il est plus rapide de déclarer une variable contenant cet élément. Cela peut signifier que vous avez besoin de lignes de code supplémentaires, mais s'il s'agit d'une occurrence régulière, le gain de performances qui en résulte peut en valoir la peine.
Par example:
myArray [myIndex] .myMethod1 (); myArray [myIndex] .myMethod2 (); myArray [myIndex] .my_variable;
... est plus lent que:
var element = myArray [myIndex]; element.myMethod1 (); element.myMethod2 (); element.my_variable;
Encore une fois, Raymond a un cas de test jsPerf pour celui-ci où vous pouvez voir les gains de performances à travers les navigateurs.
Cela est également vrai pour toutes les recherches, pas seulement pour les tableaux. Plus vous pouvez éviter de faire plusieurs recherches, mieux c'est.
Variables locales et globales
Chaque fois que vous référencez une variable, JavaScript examinera la chaîne de portée pour la trouver. Tout d'abord, il examinera les variables locales dans la portée actuelle, puis remontera dans la chaîne jusqu'aux globaux. Par conséquent, l'accès aux variables globales est beaucoup plus lent que l'accès aux variables locales, avec des effets variables en fonction du niveau de portée imbriquée.
Par example:
var ma_var = 1; MaClasse = function () {var ma_var = 1;}
Dans le cadre d'un objet de la classe ci-dessus, ma_var est sa variable locale et la première place dans la chaîne de portées que JavaScript examinera. C'est plus rapide que si la déclaration locale n'existait pas, et il fallait remonter la chaîne pour trouver la variable globale.
Parfois, il est possible que vous ayez besoin d'accéder à une valeur globale dans une portée différente, en particulier dans les boucles, auquel cas il est plus efficace d'intégrer cette variable dans la portée locale uniquement pour accéder à la version locale dans les itérations.
var global_var = 20; function MyFunc () {var local_var = global_var; for (var i = 0, length = 999; i = length; i ++) {// Vous pouvez désormais accéder à la version locale pour des temps d'accès plus rapides. }}
Il convient également de rappeler que si vous ne mettez pas «var» devant vos déclarations, il sera automatiquement créé en tant que variable globale. Pour cette seule raison, il est recommandé de toujours déclarer la portée des variables. Cela peut également vous aider si vous déboguez un problème d'étendue.
Conclusion
Certaines des techniques ci-dessus vous donneront des gains de performances beaucoup moins visibles que d'autres, et il existe de nombreuses autres techniques que je n'ai pas couvertes (par exemple, le changement de bits). Cependant, ce sont les méthodes que j’ai trouvées les plus efficaces pour tirer le meilleur parti de mon JavaScript dans les anciens navigateurs. N'oubliez pas d'examiner d'abord vos appels DOM, car ils sont beaucoup plus chers et peuvent améliorer les performances bien plus sensiblement que les autres méthodes.
Veuillez ajouter vos commentaires ci-dessous pour me faire part de vos opinions et de la manière dont vous avez réussi à contourner les problèmes potentiels liés aux performances dans votre propre JavaScript.
