1. Vermeiden Sie häufige DOM -Operationen direkt im Dokument . Wenn Sie es wirklich brauchen, können Sie die Off-Dokument-Methode verwenden. Die spezifischen Methoden umfassen, aber nicht vollständig Folgendes:
(1). Löschen Sie zuerst das Element aus dem Dokument und setzen Sie nach Abschluss der Änderung das Element wieder in seine ursprüngliche Position
(2). Stellen Sie die Anzeige des Elements auf "None" fest und ändern Sie nach Abschluss der Änderung die Anzeige auf den ursprünglichen Wert
(3). Wenn Sie mehrere DOM -Knoten erstellen müssen, können Sie das Dokumentfragment verwenden, um das Dokument gleichzeitig nach dem Erstellen mit Dokumentfragment hinzuzufügen
2. modifizieren Sie den Stil zentral
(1). Ändern Sie die Attribute im Elementstil so wenig wie möglich
(2). Versuchen Sie, den Stil zu ändern, indem Sie den Klassennamen ändern
(3). Setzen Sie den Stilwert durch CSSTEXT -Eigenschaft
3. Cache -Layout -Attributwert
Für Werte nicht referenzierter Typen in Layout-Attributen (numerische Typen) können sie zuerst in einem Zugriff in der lokalen Variablen in einem Zugriff gespeichert werden und verwenden dann lokale Variablen, wodurch das Rendern des Browsers jedes Mal vermieden werden kann, wenn das Attribut gelesen wird.
var width = el.offsetwidth; var scrollleft = el.scrollleft;
4. Setzen Sie die Position des Elements auf absolut oder fest
Wenn die Position eines Elements statisch und relativ ist, befindet sich das Element in der Dombaumstruktur. Wenn eine Operation auf dem Element erneut gerendert werden muss, rendert der Browser die gesamte Seite. Wenn Sie die Position eines Elements auf absolut und fest setzen, kann das Element von der DOM -Baumstruktur getrennt werden. Wenn der Browser rendern muss, muss es nur das Element und das Element unter dem Element rendern, wodurch die Browser -Rendering -Zeit in gewissem Maße verkürzt wird, was besonders in der heutigen zunehmenden Anzahl von Javaskriptionsanimationen berücksichtigt wird.
Die oben genannten sind einige der von mir zusammengefassten von mir über die Reduzierung des Browser -Reflows und der Repaint. Ich hoffe, es mag alle.