Cet article décrit des techniques courantes pour JavaScript pour améliorer les performances. Partagez-le pour votre référence, comme suit:
1. Faites attention à la portée
À mesure que le nombre de portées dans la chaîne de portée augmente, le temps d'accès aux variables en dehors de la portée actuelle augmente également. L'accès aux variables globales est toujours plus lent que l'accès aux variables locales car vous devez traverser la chaîne de portée.
1). Il est toujours exact d'éviter les recherches globales pour stocker des objets globaux qui seront utilisés plusieurs fois dans une fonction de variables locales.
2). Évitez cela avec une déclaration avec Create sa propre portée, augmentant ainsi la longueur de la chaîne de portée dans laquelle le code est exécuté.
2. Choisissez la bonne méthode
Une partie du problème de performance est liée à l'algorithme ou à la méthode utilisée pour résoudre le problème.
1). Évitez les recherches d'attributs inutiles
En informatique, la complexité d'un algorithme est représentée par le symbole O. L'algorithme le plus simple et le plus rapide est la valeur constante, à savoir O (1). Après cela, l'algorithme devient de plus en plus complexe et prend plus de temps à exécuter. Les types d'algorithmes JavaScript communs sont:
Constante: Peu importe le nombre de valeurs, le temps d'exécution est constant. Généralement, il représente une valeur simple et la valeur stockée dans une variable.
Logarithme: Le temps d'exécution total est lié au nombre de valeurs, mais il n'est pas nécessaire d'obtenir chaque valeur pour compléter l'algorithme. Par exemple: recherche binaire
Linéaire: le temps d'exécution total est directement lié au nombre de valeurs. Par exemple: itérez tous les éléments d'un tableau
Square: Le temps d'exécution total est lié au nombre de valeurs, et chaque valeur doit être obtenue au moins n fois. Par exemple: tri
Cube: Le temps d'exécution total est lié au nombre de valeurs, et chaque valeur doit obtenir au moins des carrés de n.
L'utilisation de variables et de tableaux est plus efficace que l'accès aux propriétés sur des objets. La recherche de tout attribut sur un objet prend plus de temps que l'accès à une variable ou à un tableau, car une propriété avec ce nom doit être recherchée dans la chaîne prototype.
D'une manière générale, tant que la complexité de l'algorithme peut être réduite, elle doit être minimisée autant que possible. Utilisez autant de variables locales que possible pour remplacer les recherches de propriétés par des recherches de valeur. De plus, si vous pouvez y accéder avec des positions de tableau numérisées ou utiliser des attributs nommés (tels que les objets nodelist), utilisez la position du tableau.
2). Optimiser la boucle
un. L'itération des déficiences dans de nombreux cas, les itérateurs qui partent de la valeur maximale et l'altération continue de la boucle sont plus efficaces.
né Conditions de terminaison simplifiées Étant donné que chaque processus de cycle calcule la condition de terminaison, il doit être assuré le plus rapidement possible.
c. Corps de boucle simplifié Le corps de boucle est le plus réalisé, alors assurez-vous qu'il est optimisé dans la mesure maximale. Assurez-vous qu'il n'y a pas de calculs intensifs qui peuvent être facilement retirés de la boucle.
d. Les boucles les plus couramment utilisées pour et tandis que dans les boucles post-test sont les boucles de pré-test. Des boucles post-tests telles que le faire à faire peuvent éviter la terminaison initiale du calcul de la condition et donc plus rapide.
3). Développez la boucle lorsque le nombre de boucles est déterminé, éliminant la boucle et en utilisant plusieurs appels de fonction est souvent plus rapide. Par exemple, le célèbre appareil Duff
4). Évitez les deux explications
Lorsque le code JavaScript veut analyser JavaScript, il y aura une pénalité à double interprétation. L'exemple suivant:
eval ("alert ('Hello World!')"); // Certains codes évaluent les valeursFixé:
alert ('Hello World'); var sayshi = nouvelle fonction ("alert ('Hello World!')");Fixé:
var sayshi = function () {alert ("Hellow world! ');}; setTimeout ("alert ('hellow world!')", 500);Fixé:
setTimeout (fonction) ({alert ('hellow world!');}, 500);5). Autres méthodes
Les méthodes natives sont plus rapides - dans la mesure du possible, utilisez des méthodes natives au lieu d'en réécrire une en JavaScript vous-même. Les méthodes natives sont écrites dans des langages compilés tels que C / C ++, ils sont donc beaucoup plus rapides que JavaScript. La chose la plus facilement oubliée en JavaScript est les opérations mathématiques complexes que l'on peut trouver dans les objets mathématiques; Ces méthodes sont beaucoup plus rapides que toute autre méthode écrite en JavaScript, comme le sinus et le cosinus.
Les instructions de commutation sont plus rapides - s'il existe une instruction IF-ELSE complexe qui peut être convertie en une instruction SORME, vous pouvez obtenir un code plus rapide. Vous pouvez également organiser les instructions de cas dans l'ordre le plus probable à l'ordre le moins probable pour optimiser davantage les instructions de commutation.
Les opérateurs de bits sont plus rapides - lorsque les opérations mathématiques sont effectuées, les opérations bit sont plus rapides que toutes les opérations booléennes ou arithmétiques. La conversion sélective des opérations bit peut considérablement améliorer les performances des calculs complexes. Par exemple, modulo, logique et logique de somme, vous pouvez envisager d'utiliser des opérations de bit pour les remplacer.
3. Minimiser le nombre de déclarations
1). Plusieurs déclarations variables
comme:
// 4 instructions --- c'est un gaspillage de Var Count = 5; var color = "bleu"; var valeurs = [1,2,3]; var maintenant = new Date ();
optimisation:
Var Count = 5, Color = "Blue", valeurs = [1,2,3], nOiw = new Date ();
Cette optimisation est très facile à faire dans la plupart des cas et est beaucoup plus rapide qu'une seule déclaration variable séparément.
2). Insérer une valeur itérative
comme:
var name = valeurs [i]; i ++;
optimisation:
var name = valeurs [i ++];
3). Utilisez des tableaux et des littéraux d'objets
comme:
var valeurs = new Array (); ---> var valeurs = [];
var obj = nouveau objet (); ---> var obj = {};
4. Optimiser l'interaction DOM
1). Minimiser les mises à jour sur place
Une fois que vous devez accéder à la partie DOM fait partie de la page qui a été affichée, vous faites une mise à jour en direct. La raison pour laquelle il est appelé une mise à jour en direct est que la page doit être mise à jour immédiatement (sur place) à l'affichage de l'utilisateur. Qu'il s'agisse d'insérer un seul caractère ou de supprimer l'intégralité du clip, il y a une pénalité de performance car le navigateur doit recalculer d'innombrables tailles à mettre à jour.
exemple:
var list = document.getElementById ("myList"); pour (var i = 0; i <10; i ++) {var item = document.CreateElement ("li"); list.appendChild (article); item.appendChild (document.createTextNode ("item" + i));}Cela ajoute 10 projets, et cette opération nécessite un total de 20 mises à jour sur place. Ce qui suit est d'améliorer la méthode suivante de création de fragments de documents:
var list = document.getElementById ("myList"); var fragment = document.CreateDocumentFragment (); for (var i = 0; i <10; i ++) {fragment.appendChild (item); item.APPEndChild (document.createTextNode ("item" + i));} list.appendChlid (fragment);Dans cet exemple, il n'y a qu'une seule mise à jour en direct, qui se produit après la création de projets. Le fragment de document est utilisé comme un espace réservé temporaire pour placer le projet nouvellement créé. Utilisez ensuite APPEDCHILD () pour ajouter tous les éléments à la liste. N'oubliez pas que lorsque l'APPEDCHILD () est passé dans le fragment de document, seuls les nœuds enfants du fragment sont ajoutés à la cible et le fragment lui-même ne sera pas ajouté.
Une fois que vous devez mettre à jour le DOM, envisagez d'utiliser la fragmentation du document pour construire la structure DOM, puis l'ajouter au document existant.
2). Utiliser Innerhtml
Il existe deux façons de créer des nœuds DOM sur une page: en utilisant des méthodes DOM telles que CreateElement (), appendChild () et en utilisant innerHTML pour les petits changements DOM, les deux méthodes sont similaires en efficacité. Pour les grands changements de DOM, l'utilisation d'innerhtml est beaucoup plus rapide que d'utiliser des méthodes DOM standard pour créer la même structure DOM. De même, l'utilisation d'innerhtml à un moment donné est beaucoup plus rapide que d'utiliser plusieurs fois InnerHTML.
3). Utilisez un proxy d'événements (simple, omis)
4). Faites attention à Nodelist
La minimisation du nombre d'accès à Nodelist peut considérablement améliorer les performances du script.
L'objet Nodelist est renvoyé lorsque la suivante se produit:
un. L'appel à getElementsByTagName () est fait
né Obtenez la propriété ChildNodes de l'élément
c. Obtenez les attributs d'attributs de l'élément
d. Consulté des collections spéciales, telles que Document.Forms, Document.images, etc.
Il est nécessaire de comprendre que lors de l'utilisation d'objets Nodelist, une utilisation raisonnable améliorera considérablement la vitesse d'exécution du code.
La performance de la fonction introduite plus tôt est également un aspect très important. Surtout lorsque plusieurs boucles sont très consommatrices de performances, cette méthode est très utile.
PS: Pour la compression JavaScript, la réduction de la taille du code est également un moyen efficace d'améliorer les performances JavaScript. Voici deux outils de compression très pratiques:
Outils de compression / formatage / de formatage JavaScript:
http://tools.vevb.com/code/jscompress
Tool de compression JSMin en ligne JS:
http://tools.vevb.com/code/jsMincompress
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.