Réduisez le nombre de visites DOM et améliorez les astuces javascript performance_javascript

L'accès aux éléments DOM a un coût, et la modification des éléments DOM est encore plus coûteuse car elle oblige le navigateur à recalculer les changements géométriques de la page.

Bien sûr, le pire des cas est d'accéder à des éléments modifiés dans une boucle, notamment des opérations de bouclage sur une collection d'éléments HTML.

Par exemple :

Copier le code Le code est le suivant :

Cette fonction boucle pour modifier le contenu des éléments de la page. Le problème avec ce code est qu'à chaque itération de boucle, l'élément est accédé deux fois : une fois pour lire l'attribut innerHTML et une fois pour le réécrire.

Une approche plus efficace consiste à utiliser des variables locales pour stocker le contenu mis à jour, puis à l'écrire en une seule fois une fois la boucle terminée :

Copier le code Le code est le suivant :

Plus le DOM est accédé, plus le code s'exécute lentement. Ainsi, lorsqu’il existe d’autres alternatives, il faut essayer de réduire le nombre de visites dans les DOM.