Performance JavaScript

Comment accélérer votre code JavaScript.

Réduire les activités dans les boucles

Le codage est souvent utilisé avec des boucles.

Avec chaque itération de la boucle, chaque instruction dans la boucle, y compris for Instructions, seront exécutées.

Les instructions ou les affectations qui peuvent être placées en dehors des boucles rendront les boucles plus rapides.

Mauvais code :

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

Meilleur code :

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

Chaque itération de la boucle, le mauvais code accède à l'array length Propriétés.

Bon code accède à l'extérieur des boucles length Propriétés, pour rendre les boucles plus rapides.

Réduire les accès au DOM

Par rapport à d'autres JavaScript, l'accès à l'HTML DOM est très lent.

Si vous prévoyez d'accéder à un élément DOM plusieurs fois, accédez-y une seule fois et utilisez-le comme variable locale :

Exemple

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

Essayez-le vous-même

Réduire la taille du DOM

Essayez de maintenir un nombre d'éléments minimum dans le HTML DOM.

Cela augmentera toujours le temps de chargement de la page et accélérera le rendu (affichage de la page), surtout sur les appareils plus petits.

À chaque tentative de recherche dans le DOM (par exemple getElementsByTagNameTous bénéficieront d'un DOM plus petit.

Évitez les variables inutiles

Ne créez pas de nouvelles variables que vous ne prévoyez pas de stocker.

Vous pouvez généralement remplacer le code :

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

Utilisez ce code :

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

Décaler le chargement de JavaScript

Placez le script en bas de page pour que le navigateur charge d'abord la page.

Lors du téléchargement du script, le navigateur ne démarre aucune autre téléchargement. De plus, toutes les activités d'analyse et de rendu peuvent être bloquées.

La norme HTTP définit que le navigateur ne doit pas télécharger en parallèle plus de deux types d'éléments.

Une option consiste à utiliser defer="true".L'attribut defer stipule que le script doit être exécuté après que la page ait été complètement analysée, mais il ne s'applique qu'aux scripts externes.

Si possible, vous pouvez ajouter du script à la page via le code après que la page soit complètement chargée :

Exemple

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

Évitez d'utiliser with

Évitez d'utiliser with Mots-clés. Ils ont un impact négatif sur la vitesse. Ils peuvent également troubler l'aire d'action JavaScript.

En mode strict.Interdit Mots-clés avec.