Wenn wir Rich Internet Applications (RIA) entwickeln, schreiben wir häufig einige Javascript-Skripte, um Seitenelemente zu ändern oder hinzuzufügen. Diese Aufgaben werden letztendlich vom DOM – oder Document Object Model – erledigt, und unsere Implementierungsmethode wirkt sich auf die Reaktionsgeschwindigkeit der Anwendung aus.
DOM -Vorgänge führen dazu, dass der Browser eine erneute Analyse (Reflow) durchführt. Hierbei handelt es sich um einen Berechnungsprozess des Browsers, der bestimmt, wie Seitenelemente angezeigt werden. Durch direktes Ändern des DOM, Ändern des CSS-Stils eines Elements oder Ändern der Browserfenstergröße wird eine erneute Analyse ausgelöst. Das Lesen der Layouteigenschaften eines Elements wie offsetHeithe oder offsetWidth löst ebenfalls eine erneute Analyse aus. Das erneute Parsen nimmt Rechenzeit in Anspruch. Je weniger das erneute Parsen ausgelöst wird, desto schneller ist die Anwendung.
DOM-Operationen ändern normalerweise entweder vorhandene Seitenelemente oder erstellen neue Seitenelemente. Die folgenden vier Optimierungslösungen decken zwei Methoden zum Ändern und Erstellen von DOM-Knoten ab und helfen Ihnen dabei, die Häufigkeit zu reduzieren, die eine erneute Analyse des Browsers auslöst.
Lösung 1: Ändern Sie das DOM, indem Sie die CSS-Klassennamen ändern
Mit dieser Lösung können wir mehrere Stilattribute eines Elements und seiner untergeordneten Elemente gleichzeitig ändern und nur eine Analyse auslösen.
brauchen:
( Emu-Hinweis : Der Autor des Originalartikels hatte offensichtlich einen Kurzschluss in seinem Gehirn, als er dies schrieb, und stellte die zu lösenden Probleme hier in den Out-of-the-Flow-DOM-Manipulationsmodus. Dies ist jedoch der Fall Der Autor kann das Problem anhand des Demonstrationscodes leicht verstehen, daher wird Emu den Originaltext nicht reproduzieren.
Wir müssen jetzt eine Funktion schreiben, um mehrere Stilregeln eines Hyperlinks zu ändern. Die Implementierung ist sehr einfach. Ändern Sie einfach die diesen Regeln entsprechenden Attribute nacheinander. Das Problem besteht jedoch darin, dass jedes Mal, wenn ein Stilattribut geändert wird, die Seite neu analysiert wird.
Funktion selectAnchor(element) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
Lösung:
Um dieses Problem zu lösen, können wir zunächst einen Stilnamen erstellen und alle zu ändernden Stilregeln auf diesen Klassennamen setzen. Anschließend fügen wir diesen neuen Klassennamen zum Hyperlink hinzu, sodass wir mehrere Stilregeln hinzufügen können und nur eine Analyse durchführen können ausgelöst. Ein weiterer Vorteil dieses Modells besteht darin, dass es auch die Trennung von Leistung und Logik erreicht.
.selectedAnchor {
Schriftstärke: fett;
Textdekoration: keine;
Farbe: #000;
}
Funktion selectAnchor(element) {
element.className = 'selectedAnchor';
}