L'accès aux éléments DOM a un coût, et la modification des éléments DOM est encore plus coûteuse car il amène le navigateur à recalculer les modifications géométriques de la page.
Bien sûr, le pire des cas est d'accéder à l'élément modifié de la boucle, en particulier les opérations de boucle sur les collections HTML Elements.
Par exemple:
La copie de code est la suivante:
<! - Avant l'optimisation ->
<script type = "text / javascript">
fonction innerhtmlloop () {
pour (var count = 0; count <15000; count ++) {
document.getElementById ('ici'). InnerHtml + = 'A';
}
}
</cript>
Cette fonction boucle pour modifier le contenu de l'élément de page. Le problème avec ce code est que chaque itération de boucle, l'élément est accessible deux fois: une fois lu la propriété InnerHTML et une fois la réécrire.
Une approche plus efficace consiste à utiliser des variables locales pour stocker le contenu mis à jour, puis à l'écrire à la fois après la fin de la boucle:
La copie de code est la suivante:
<! - Après l'optimisation ->
<script type = "text / javascript">
fonction innerhtmlloop () {
var content = '';
pour (var count = 0; count <15000; count ++) {
Contenu + = 'A';
}
document.getElementById ('ici'). InnerHtml + = Contenu;
}
</cript>
Plus vous accédez à DOM, plus le code s'exécute lent. Par conséquent, lorsqu'il existe d'autres solutions pour les remplacer, nous devons essayer de minimiser le nombre de visites au DOM.