Comment améliorer les performances de JavaScript ?

Dans le monde d’aujourd’hui, presque tous les sites Web utilisent JavaScript. Les applications Web deviennent de plus en plus complexes et interactives pour l'utilisateur, ce qui entraîne des problèmes de performances. Cela conduit à une mauvaise expérience utilisateur, ce qui n’est pas souhaitable pour toute application Web. Différents facteurs peuvent entraîner de mauvaises performances, des temps de chargement et des temps de réponse longs.

Dans ce tutoriel, nous discuterons de tous ces facteurs et de la manière de résoudre ce problème et d'améliorer les performances de JavaScript.

Code léger et compact

La première chose que vous pouvez faire pour améliorer les performances de JavaScript est d'écrire du code léger et compact. Le code JavaScript peut avoir plusieurs modules et certaines fonctions ou variables inutilisées, qui peuvent être facilement supprimées du code. Cela améliorera le temps de compilation JavaScript, ce qui entraînera de meilleures performances. De plus, l’utilisation d’algorithmes avancés pour effectuer des tâches complexes peut être très bénéfique pour améliorer les performances.

Utilisez des variables locales

JavaScript accède aux variables locales plus rapidement que les variables globales, donc l'utilisation de variables locales peut améliorer les performances de JavaScript. Chaque fois que nous accédons à une variable, JavaScript recherche d'abord la variable dans la portée locale, puis recherche les variables globales. Si toutes les variables sont définies dans une portée locale, cela réduira le temps d'accès. De plus, les variables locales sont détruites une fois l'appel de fonction terminé, mais les variables globales conservent leurs valeurs en mémoire. Cela peut également entraîner des problèmes de mémoire.

// Local variables
const id = 10
let value = 'Tutorialspoint'
// Global variables
var key = 'JavaScript'

Réduire l'accès au DOM

Accéder au DOM et le manipuler est l'une des fonctions les plus importantes de JavaScript. Mais trop d’accès inutiles au DOM peuvent entraîner d’énormes problèmes de performances. Chaque fois que nous manipulons un élément du DOM, le DOM est actualisé avec un état mis à jour, et si vous continuez à mettre à jour les éléments du DOM toutes les secondes, le DOM est actualisé toutes les secondes. Il est donc recommandé de mettre à jour le DOM lorsque cela est nécessaire. Si l'utilisateur doit mettre à jour un élément plusieurs fois, il est préférable de stocker l'objet élément dans une variable et d'utiliser cette variable pour mettre à jour le DOM.

let element = document.getElementById('element_id')
element.innerHTML = 'Tutorialspoint'

Réduire le nombre d'itérations de boucle

Les boucles sont un moyen simple d'accomplir certaines tâches répétitives, mais elles peuvent également entraîner de mauvaises performances. Les longues boucles d'itération prennent beaucoup de temps, il est donc préférable d'éviter d'utiliser de longues boucles si possible. Utilisez plutôt de petites boucles et effectuez un minimum de tâches dans la boucle. De plus, n'accédez pas au DOM dans une boucle ; cela entraînerait d'énormes problèmes de performances puisque vous manipulez le DOM à chaque itération de la boucle.

let names = ['abc', 'xyz', 'mno', 'pqr'];
let element = document.getElementById('element_id');
// DON’T DO THIS
for(let index=0; i<names.length; i++){
   element.innerHTML += names[index] + ' ';
}
// DO THIS
let str = '';
for(let index=0; i<names.length; i++){
   str += names[index];
}
element.innerHTML = str;

Utilisez la programmation asynchrone

La programmation asynchrone est l'un des meilleurs moyens d'améliorer les performances des applications Web. Dans la programmation asynchrone, l'exécution du code se fait de manière asynchrone, ce qui permet d'effectuer plusieurs tâches simultanément. Il en résulte un chargement rapide des données et une réponse rapide. En JavaScript, les opérations asynchrones sont effectuées par AJAX, qui signifie Asynchronous Javascript and XML.

let http = new XMLHttpRequest()
http.open('GET', '...URL')
http.onload = function(){
   console.log(this.response); // the response
}

Mettez JavaScript en bas de page

Lorsque JavaScript est placé en haut de la page, il s'exécute lorsque la page se charge, il faut donc un peu plus de temps pour charger la page entière. Cela ralentit le chargement des pages. Pour résoudre ce problème, JavaScript doit être placé au bas de la page afin que JavaScript commence à s'exécuter une fois la page entière chargée.

Exemple

<html>
<body>
   <div>Your Page Content</div>
   <div id='element'></div>
   <script>
      // JavaScript Code at Page's Bottom
      document.getElementById('element').innerHTML = 'Welcome to
      Tutorialspoint'
   </script>
</body>
</html>

Éliminer les fuites de mémoire

Si une application Web présente une fuite de mémoire, l'application allouera de plus en plus de mémoire, entraînant d'énormes problèmes de performances et de mémoire. Pour résoudre ce problème, assurez-vous qu'il n'y a pas de fuite de mémoire dans votre application et vérifiez si les variables ne prennent pas trop de valeurs. Les utilisateurs peuvent observer des fuites de mémoire dans les outils de développement Chrome.

Utiliser l'algorithme d'optimisation

Les tâches complexes en JavaScript prennent généralement beaucoup de temps, ce qui peut entraîner des problèmes de performances, et en utilisant des algorithmes optimisés, nous pouvons réduire le temps requis pour effectuer les tâches. Réécrivez l'algorithme de manière plus optimisée pour obtenir les meilleurs résultats. Évitez également d'utiliser de longues boucles, des appels récursifs et des variables globales.

Créer et utiliser des variables

En JavaScript, créez uniquement des variables que vous utiliserez et conserverez des valeurs. Utilisez ce qui suit et évitez les lignes de code et les déclarations de variables inutiles -

document.write(num.copyWithin(2,0));

Évitez d'utiliser with

with mot-clé n’a pas un bon impact sur la vitesse de JavaScript. Évitez de l'utiliser dans votre code.

Boucles plus rapides

Lorsque vous utilisez des boucles, conservez les affectations en dehors de la boucle. Cela rendra la boucle plus rapide -

var i;
// assignment outside the loop
var j = arr.length;
for (i = 0; i < j; i++) {
   // code
}

Utilisez d'autres outils pour trouver des problèmes

Votre application Web semble fonctionner correctement, mais il peut y avoir des problèmes de performances, et afin d'identifier ces problèmes, certains outils peuvent être utiles. Lighthouse est un outil utile d’analyse des performances des applications Web. Il permet de vérifier les performances, les meilleures pratiques, l’accessibilité et le référencement. Il existe non seulement cet outil mais aussi d'autres outils sur Internet qui peuvent être utilisés pour vérifier les performances des applications Web et nous pouvons simplement voir les problèmes et essayer de les surmonter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!