Performances JavaScript
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 à chaque itération de la boucle.
Les instructions ou les affectations qui peuvent être placées en dehors de la boucle accéléreront l'exécution de la boucle.
Mal:
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érée.
Le meilleur code accède à la propriété length en dehors de la boucle et accélère l'exécution de la boucle.
Réduire l'accès au DOM
L'accès au DOM HTML est très lent, par rapport aux autres instructions JavaScript.
Si vous prévoyez d'accéder plusieurs fois à un élément DOM, accédez-y une fois et utilisez-le comme variable locale :
Exemple
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Réduire la taille du DOM
Gardez le nombre d'éléments dans le DOM HTML petit.
Cela améliorera toujours le chargement des pages et accélérera le rendu (affichage des pages), en particulier sur les petits appareils.
Chaque tentative de recherche dans le DOM (comme getElementsByTagName) bénéficiera d'un DOM plus petit.
Évitez les variables inutiles
Ne créez pas de nouvelles variables si vous ne prévoyez pas d'enregistrer des 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 la page en premier.
Pendant le téléchargement d'un script, le navigateur ne démarre aucun autre téléchargement. 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. L'attribut defer spécifie que le script doit être exécuté une fois l'analyse de la page terminée, mais il ne fonctionne que pour les scripts externes.
Si possible, vous pouvez ajouter votre script à la page par code, après le chargement de la page :
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- withclé. Cela a un effet négatif sur la vitesse. Cela encombre également les étendues JavaScript.
Le withmot-clé n'est pas autorisé en mode strict.