Comment accélérer l'exécution du code JavaScript

Lors du développement d'une application ou d'un site Web, l'un des éléments les plus cruciaux à considérer est les performances de l'application ou du site Web. En tant qu'utilisateur, je ne voudrais pas que l'application prenne beaucoup de temps à charger ou chaque fois que je clique sur quelque chose et que je dois attendre une action. Souvent, si la page Web prend 5 à 6 secondes pour charger la plupart des utilisateurs, y compris moi, qui quitterait la page Web.

Pour les développeurs Web, JavaScript est un outil fantastique. Chaque développeur Web a appris JavaScript à un moment donné de sa vie. Cependant, le code JavaScript médiocre entraîne des sites Web plus lents.

Dans cet esprit, un développeur examine toujours les moyens d'améliorer sa page Web. Vous avez de la chance car aujourd'hui, nous allons parler de la façon d'accélérer l'exécution du code JavaScript.

Activités Réduction des boucles

Un programmeur utilise souvent des boucles pour raccourcir son code. Cependant, il convient de garder à l'esprit qu'il existe de mauvaises façons d'utiliser des boucles qui rendent votre programme lent.

Prenons un exemple de boucle «pour».

Exemple:

Cette boucle est programmatiquement correcte, mais ses performances seront mauvaises. Nous pouvons mettre le MyArray.Instruction de longueur à l'extérieur de la boucle de sorte qu'elle n'a pas à calculer la longueur encore et encore jusqu'à la fin de la boucle.

Solution:

Laissez Len = MyArray.longueur;
pour (soit i = 0; i < len; i++)
//Bonjour

Dans cette boucle, nous pouvons voir que la longueur est fixe et que la boucle n'a pas à calculer la longueur d'un tableau à chaque fois qu'il itère. Par conséquent, la vitesse augmente et les performances aussi.

Réduction d'accès DOM

Si nous comparons l'instruction JavaScript à l'accès à HTML DOM, nous constaterons que l'accès à HTML DOM est très lent. Ce n'est pas un problème si nous n'accédons pas ou ne faisons pas de nombreuses opérations DOM. Cependant, lorsque vous effectuez de nombreuses opérations DOM, cela affecte la vitesse de la page Web.

La solution est pour stocker l'élément DOM dans une variable locale, puis nous pouvons accéder à celle plusieurs fois.

Par exemple:

const myobj = document.getElementById ("Speed"), innerHtml = "Non réalisé";
const myobj = document.GetElementByid ("Speed").Hidden = "false";
// lent et entrave la vitesse

Cela fait que notre programme s'exécute de manière inefficace.

Regardons un autre exemple qui aborde ce problème.

const myobj = document.GetElementById ("Speed");
myobj.innerHtml = "Achieved";
myobj.Hidden = "false";

Maintenant que nous avons examiné la réduction de l'accès DOM, brillons la lumière sur la réduction de la taille Dom pour améliorer la vitesse de notre page Web en JavaScript.

Réduction de la taille DOM

Avant d'entrer dans la réduction de la taille DOM, regardons la taille excessive DOM, ce qui signifie que votre page a trop de nœuds DOM / composants HTML si la taille DOM est trop grande. Cela peut également signifier que vos éléments de page DOM sont profondément imbriqués. Il en résulte la consommation de plus de puissance, réduisant ainsi les performances de la page ou la vitesse.

La solution est que le nombre d'éléments doit être minimisé dans le DOM HTML. L'avantage de cela est qu'il améliorera le chargement de la page ainsi que la vitesse du processus de rendu qui est l'affichage de la page. Il est très pratique surtout sur les petits appareils comme les téléphones portables, etc.

Éliminer les variables inutiles

C'est l'astuce la plus simple pour améliorer les performances de votre page Web. Pourquoi faire des variables alors qu'ils ne sont pas nécessaires? Aussi, pourquoi faire des variables où vous savez que vous l'utilisez juste pour l'afficher quelque part? Lorsque nous évitons de faire des variables inutiles, nos performances de page Web augmentent.

Par exemple, mauvais code:

Soit FirstName = "Jhon";
Soit LastName = "Cena";
Soit FullName = FirstName + "" + LastName;
alerte (FullName);

Dans cet exemple, nous pouvons voir que nous stockons le FirstName et le LastName en FullName juste pour l'afficher dans une alerte. Ne serait-il pas préférable d'alerter directement le nom de premier? C'est ce que l'élimination des variables inutiles est.

Solution (bon code):

Soit FirstName = "Jhon";
Soit LastName = "Cena";
alert (FirstName + "" + LastName);

Retard Chargement de JavaScript

Pour améliorer les performances de votre page Web en JavaScript, c'est une pratique courante de mettre une balise de script ou dans la balise de script le code JavaScript à la fin de la page HTML. Le but principal est que le navigateur doit d'abord charger le HTML puis le code JavaScript. Pour le mettre en termes techniques, pendant un script téléchargement, le navigateur ne lancera aucun autre téléchargement et que tout analyse et rendu seront bloqués.

Nous pouvons également utiliser «defer =» true »» dans notre balise de script. La fonction de l'attribut de différence est qu'il spécifie que le script ne doit être exécuté qu'une fois la page terminée l'analyse. En d'autres termes, il attend que tout le Dom soit chargé. Il convient de noter, cependant, qu'il est uniquement compatible avec les scripts externes.

Exemple:

Évitez d'utiliser le mot-clé «avec»

Avec le mot clé est utilisé pour référencer les propriétés ou les méthodes d'un objet car il s'agit d'une sorte de sténographie. L'utilisation du mot-clé «avec» ralentit la vitesse. L'autre raison de ne pas utiliser le mot-clé avec est qu'il regroupe les portes de JavaScript.

Minify JavaScriptcode

La minimisation ou la minimisation du code JavaScript est une autre méthode pour accélérer l'exécution de notre code JavaScript. Le code JavaScript minimisant signifie simplement supprimer ou modifier tous les caractères indésirables et inutiles dans le code source JavaScript mais sans modifier la fonctionnalité du programme. Il comprend plusieurs choses comme la suppression des commentaires, des demi-colons ainsi que des espaces blancs. En dehors de cela, cela implique également l'utilisation de la fonction courte et des noms variables. Voyons un exemple avant et après la minification de notre code:

Avant de minimiser:

//la fonction
// quel journal de console
// le premier message de la personne
fonction FirstMessage (name)
console.log ("Le premier message est de:", nom);

// appelle maintenant la fonction
FirstMessage ("John");

Après avoir minimisé:

fonction fmsg (n) console.log ("Le premier message est de:", n) firstMessage ("John");

Conclusion

Un développeur maintient toujours l'équilibre entre la fiabilité et l'optimisation du code. C'est pour cette raison que nous avons expliqué comment accélérer l'exécution du code JavaScript dans cet article. Tous les conseils et astuces mentionnés ci-dessus lorsqu'ils sont utilisés ensemble auront une amélioration significative de la vitesse du code JavaScript. Cependant, il faut garder à l'esprit que bien que les performances soient nécessaires, elle n'est pas supérieure à la détection des erreurs ou à l'ajout de fonctionnalités.