Parmi les suggestions (i) de JavaScript sur l'amélioration des performances du site Web, plusieurs suggestions sont présentées pour améliorer les performances du site Web, des demandes HTTP au rendu de page. Cet article est un résumé du point de vue de JavaScript Performance après avoir appris un autre livre de Steve Sounders, "Advanced Guide to High Performance Site Web Construction".
Les performances JavaScript sont la clé de la mise en œuvre d'applications Web de haute performance
- Sounders STEVE
1. Utiliser la chaîne de portée JS
chaîne de portée
Lors de l'exécution d'un morceau de code JavaScript (code global ou fonction), le moteur JavaScript créera une portée pour lui, également connu sous le nom de contexte d'exécution. Une fois la page chargée, une portée globale sera créée en premier, puis chaque fonction sera exécutée, une portée correspondante sera établie, formant ainsi une chaîne de portée. Chaque portée a une chaîne de portée correspondante, la tête de la chaîne est la portée globale et la queue de la chaîne est la portée de la fonction actuelle.
Le but de la chaîne de portée est d'analyser les identifiants. Lorsque la fonction est créée (non exécutée), les arguments, les paramètres nommés et toutes les variables locales de la fonction seront ajoutées à la portée actuelle. Lorsque JavaScript doit trouver la variable X (ce processus est appelé résolution variable), il recherchera d'abord s'il y a un attribut x de la fin de la chaîne dans la chaîne de portée, c'est-à-dire la portée actuelle. S'il n'est pas trouvé, continuez à rechercher le long de la chaîne de portée jusqu'à ce que la tête de chaîne, c'est-à-dire la chaîne de portée globale, et la variable n'est pas trouvée, on pense qu'il n'y a pas de variable x sur la chaîne de portée de ce code, et une exception d'erreur de référence (référence) est lancée.
La gestion de la profondeur de la chaîne de portée est un moyen simple d'améliorer les performances avec juste une petite quantité de travail. Nous devons éviter les vitesses d'exécution lentes en raison de la croissance involontaire de la chaîne de portée.
Utilisez les variables locales (courtes chaînes de portée autant que possible)
Si nous comprenons le concept de chaîne de portée, nous devons être clairs que les variables d'analyse du moteur JavaScript sont liées à la profondeur de la chaîne de portée. De toute évidence, les variables locales sont à la fin de la chaîne et ont la vitesse d'accès la plus rapide. Par conséquent, une bonne expérience est: lorsqu'une variable non locale est utilisée plus d'une fois, veuillez utiliser des variables locales pour les stocker, par exemple:
Fonction SHOchIV () {document.getElementById ('MyDiv'). ClassName = 'Changed'; document.getElementById ('MyDiv'). Style.Height = 150;}Ici, l'élément MyDiv Dom est référencé deux fois. Pour une référence plus rapide, nous devons le stocker avec une variable locale. Les avantages de le faire non seulement raccourcissent la chaîne de portée, mais évitent également les requêtes en double des éléments DOM:
Fonction SHOchIV () {var MyDivStyle = document.getElementById ('MyDiv'). Style; MyDiv.ClassName = 300; MyDiv.Style.Height = 150;}Évitez d'utiliser avec (ne cultivez pas de chaînes de portée)
Généralement, pendant l'exécution du code, la chaîne de portée de la fonction est fixe, mais avec peut augmenter temporairement la chaîne de portée de la fonction. avec est utilisé pour afficher les propriétés des objets comme variables locales pour les rendre faciles à accéder, par exemple:
var user = {name: 'vicfeel', Âge: '23 '}; fonction showUser () {var local = 0; avec (user) {console.log ("name" + name); console.log ("age" + age); console.log (local);}} showUser ();Dans cet exemple, avec une portée temporaire est ajoutée à la fin de la chaîne de portée ShowUser, qui stocke toutes les propriétés de l'objet utilisateur, c'est-à-dire que la chaîne de portée avec le code est augmentée. Dans ce code, les variables locales comme le changement local passent du premier objet à la fin de la chaîne à la seconde, ce qui ralentit naturellement l'accès des identifiants. Jusqu'à ce que la déclaration soit terminée, la chaîne de portée reprend la croissance. En raison de ce défaut de avec, nous devons essayer d'éviter d'utiliser le mot-clé avec.
2 Contrôle de flux plus raisonnable
Comme d'autres langages de programmation, JavaScript propose quelques instructions de contrôle de flux (boucles, conditions, etc.), et l'utilisation d'instructions appropriées sur chaque lien peut considérablement améliorer la vitesse d'exécution du script.
Jugement à condition rapide
En ce qui concerne le jugement conditionnel, la première façon d'éviter:
if (value == 0) {return result0;} else if (value == 1) {return result1;} else if (value == 2) {return result2;} else if (valeur == 3) {return result3;} else if (value == 4) {return result4;} else if (value == 5) {return result5;} else if (value == 6) {return; résultat7;}Le principal problème avec cette méthode d'utilisation si pour un jugement conditionnel est que le niveau est trop profond. Lorsque je veux une valeur = 7, le temps consomme beaucoup plus longtemps que la valeur = 0, qui perd considérablement les performances et est une mauvaise lisibilité.
Une meilleure façon de faire des jugements avec Switch.
swithc (valeur) {cas 0: return result0; cas 1: Retour Result1; cas 2: Retour Result2; cas 3: Retour Result3; Cas 4: Retour Result4; Cas 5: Retour Result5; Cas 6: Retour Result6; Default: Retour Result7;}Cela améliore non seulement la lisibilité, mais nécessite également un temps de requête plus rapide que si. Mais si si est plus rapide que le commutateur si seulement une ou deux conditions
En JavaScript, il existe un autre moyen de remettre en question les conditions. L'exemple précédent était de renvoyer différentes valeurs en fonction de la valeur, qui se trouve être en mesure d'utiliser des tableaux pour implémenter la requête de mappage des tables de hachage.
// Définir les résultats du tableau VAR = [Résultat0, result1, result2, result3, result4, result5, result6, result7]; // requête des résultats de retour [valeur];
Cette méthode de tableau est plus efficace lorsque la plage de requête est grande, car elle n'a pas à détecter les limites supérieures et inférieures, et n'a besoin que de remplir la valeur d'index pour la question. Sa limitation est que la condition correspond à une seule valeur plutôt qu'à une série d'opérations. Par conséquent, nous devons combiner de manière approfondie la situation réelle, choisir la méthode de jugement appropriée des conditions et maximiser les performances.
Cycle rapide
Il existe 4 méthodes de boucle dans JavaScript pour la boucle, la boucle à faire, tandis que la boucle et la boucle for-in. Voici une méthode de recyclage très couramment utilisée:
var valeurs = [1,2,3,4,5]; pour (var i = 0; i <valeurs.length; i ++) {processus (valeurs [i]);}Nous pouvons voir que l'optimisation la plus évidente de ce code est les valeurs.lengle. Chaque boucle que je dois être comparée à la longueur des valeurs. Les attributs de requête sont plus longs que les variables locales. Si le nombre de boucles est plus grand, plus il sera long. Par conséquent, il peut être optimisé comme ceci:
var valeurs = [1,2,3,4,5]; var longueur = valeurs.length; // longueur de tableau de stockage de variable locale pour (var i = 0; i <longueur; i ++) {process (valeurs [i]);}Ce code peut également continuer à optimiser, diminuant la variable de boucle à 0 au lieu d'ajouter à la longueur totale.
var valeurs = [1,2,3,4,5]; var longueur = valeurs.length; for (var i = longueur; i -;) {// décrémente à 0process (valeurs [i]);}Ici, la fin de la boucle est transformée pour comparer avec 0, donc la vitesse de chaque boucle est plus rapide. Selon la complexité de la boucle, ce simple changement peut économiser environ 50% du temps qu'auparavant.