Performances JavaScript


Table des matières

    Afficher la table des matières


Comment accélérer votre code JavaScript.


Réduire l'activité dans les boucles

Les boucles sont souvent utilisées en programmation.

Chaque instruction d'une boucle, y compris l'instruction for, est exécutée pour chaque itération du boucle.

Les instructions ou affectations qui peuvent être placées en dehors de la boucle rendront le la boucle fonctionne plus vite.

Mauvais :

for (let i = 0; i < arr.length; i++) {

Meilleur code :

let l = arr.length;
for (let i = 0; i < l; i++) {

Le mauvais code accède à la propriété length d'un tableau à chaque fois que la boucle est itératif.

Le meilleur code accède à la propriété length en dehors de la boucle et rend le la boucle fonctionne plus vite.


Réduire l'accès au DOM

L'accès au DOM HTML est très lent, comparé aux autres instructions JavaScript.

Si vous comptez accéder plusieurs fois à un élément DOM, accédez-y une fois et utilisez comme variable locale :

Exemple

const obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Performance</h2>

<p>If you expect to access a DOM element several times, access it once, and the use it as a local variable:</p>

<p id="demo"></p>

<script>
const obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>

</body>
</html> 


Réduire la taille du DOM

Gardez le nombre d'éléments dans le DOM HTML petit.

Ce sera toujours améliorer le chargement des pages et accélérer le rendu (affichage des pages), en particulier sur les appareils plus petits.

Chaque tentative de recherche dans le DOM (comme getElementsByTagName) bénéficiera à partir d'un DOM plus petit.


Évitez les variables inutiles

Ne créez pas de nouvelles variables si vous ne prévoyez pas de sauvegarder les valeurs.

Souvent, vous pouvez remplacer le code comme ceci :

let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Avec ça:

document.getElementById("demo").innerHTML = firstName + " " + lastName;

Retarder le chargement de JavaScript

Placer vos scripts au bas du corps de la page permet au navigateur de charger le page en premier.

Pendant le téléchargement d'un script, le navigateur ne démarrera aucun autre téléchargements. De plus, toutes les activités d'analyse et de rendu peuvent être bloquées.

La spécification HTTP définit que les navigateurs ne doivent pas télécharger plus de deux composants en parallèle.

Une alternative consiste à utiliser defer="true" dans la balise de script. Le L'attribut defer spécifie que le script doit être exécuté une fois la page terminée. l'analyse est terminée, mais cela ne fonctionne que pour les scripts externes.

Si possible, vous pouvez ajouter votre script à la page par code, une fois la page chargée :

Exemple

<script>
window.onload = function() {
  
const element = document.createElement("script");
  
element.src = "myScript.js";
  
document.body.appendChild(element);
};
</script>

Évitez d'utiliser avec

Évitez d'utiliser le mot clé with. Cela a un effet négatif sur vitesse. Cela encombre également les étendues JavaScript.

Le mot-clé with n'est pas autorisé en mode strict.