Der Zugriff auf DOM -Elemente ist kostenlos, und das Ändern von DOM -Elementen ist noch teurer, da der Browser die geometrischen Änderungen der Seite neu berechnet.
Natürlich ist der schlimmste Fall, auf das modifizierte Element in der Schleife zuzugreifen, insbesondere in den Schleifenvorgängen in HTML -Elementkollektionen.
Zum Beispiel:
Die Codekopie lautet wie folgt:
<!-Vor der Optimierung->
<script type = "text/javaScript">
Funktion Innerhtmlloop () {
für (var count = 0; count <15000; count ++) {
document.getElementById ('hier'). Innerhtml+= 'a';
}
}
</script>
Diese Funktion schleift, um den Inhalt des Seitenelements zu ändern. Das Problem mit diesem Code ist, dass auf jede Schleifeneratur auf das Element zweimal zugegriffen wird: Sobald Sie die Innerhtml -Eigenschaft lesen und sie einmal umschreiben.
Ein effizienterer Ansatz besteht darin, lokale Variablen zum Speichern des aktualisierten Inhalts zu verwenden und ihn dann nach dem Ende der Schleife zu schreiben:
Die Codekopie lautet wie folgt:
<!-nach der Optimierung->
<script type = "text/javaScript">
Funktion Innerhtmlloop () {
var content = '';
für (var count = 0; count <15000; count ++) {
Inhalt+= 'a';
}
document.getElementById ('hier'). Innerhtml+= Inhalt;
}
</script>
Je öfter Sie auf das DOM zugreifen, desto langsamer wird der Code ausgeführt. Wenn es andere Lösungen gibt, die sie ersetzen, sollten wir versuchen, die Anzahl der Besuche in der DOM zu minimieren.