Comment accélérer votre code JavaScript.
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.
for (let i = 0; i < arr.length; i++) {
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.
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 :
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>
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.
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;
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 :
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
É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.