Performance JavaScript

Les performances Web sont des indicateurs objectifs, ainsi que le temps de chargement et l'expérience perçue par l'utilisateur pendant l'exécution.

Les performances Web sont le temps de chargement du site, l'interaction et la réponse, ainsi que la fluidité de l'interaction utilisateur.

De nombreuses fonctionnalités peuvent affecter les performances, y compris les délais, la taille de l'application, le nombre de nœuds DOM, le nombre de demandes de ressources émises, les performances JavaScript, la charge CPU, etc.

Comment améliorer les performances Web ?

Réduire l'activité de la boucle

Les instructions ou les affectations qui peuvent être placées à l'extérieur de la boucle ou les affectations rendront la boucle plus rapide.

Dans l'exemple suivant, nous accédons à la propriété length de l'array à chaque itération de la boucle :

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

Dans l'exemple suivant, nous accédons à la propriété length à l'extérieur de la boucle et faisons tourner la boucle plus rapidement :

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

Améliorer l'efficacité d'accès au DOM

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

Si vous avez besoin d'accéder plusieurs fois aux éléments du DOM, accédez-y une fois et utilisez-le comme variable locale.

Placez JavaScript à la fin de la page

Placez le JavaScript à la fin du corps de la page pour permettre au navigateur de charger d'abord la page.

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

Une autre méthode consiste à utiliser dans l'étiquette de script.defer="true". LeRetardLe script devrait exécuter les attributs spécifiés après que la page ait été complètement analysée, mais cela ne s'applique qu'aux scripts externes.

Ne pas utiliser le mot-clé 'with'

Le mot-clé with est considéré comme un 'gâchis', car il comporte quelques defects très frustrants.

Bien que with simplifie le processus de traitement des propriétés locales, son utilisation augmente les coûts de recherche des variables dans d'autres scopes.

Il n'est pas permis d'utiliser les mots-clés dans le mode strict.

Le moins de requêtes HTTP

En combinant des fichiers externes et en incluant JavaScript directement dans la page HTML, il est possible de minimiser les requêtes HTTP pour afficher la page.

Chaque accès unique au serveur HTTP entraîne de nombreux retards.

Ne pas utiliser deux fois le même script

Les scripts redondants ont un impact important sur les performances. Les scripts redondants créent des requêtes HTTP inutiles, en particulier dans le navigateur IE.

Ne pas utiliser eval()

Bien que laeval()Les fonctions sont une bonne méthode pour exécuter du code arbitraire, mais chaque chaîne passée à la fonction eval doit être analysée et exécutée immédiatement. Chaque fois qu'une exécution atteint l'appel de la fonction eval, cela génère des coûts.