1. Vermeiden Sie häufige DOM-Operationen direkt am Dokument Bei Bedarf können Sie unter anderem die folgenden Methoden verwenden:
(1). Löschen Sie zuerst das Element aus dem Dokument und platzieren Sie es dann wieder an seiner ursprünglichen Position, nachdem Sie die Änderung abgeschlossen haben
(2). Stellen Sie die Anzeige des Elements auf „keine“ und ändern Sie die Anzeige nach Abschluss der Änderung auf den ursprünglichen Wert
(3). Wenn Sie mehrere DOM-Knoten erstellen müssen, können Sie diese mit DocumentFragment erstellen und gleichzeitig zum Dokument
2. Stile zentral ändern
(1). Ändern Sie die Attribute des Elementstils so wenig wie möglich
(2). Versuchen Sie, den Stil zu ändern, indem Sie den Klassennamen
ändern
(3). Legen Sie den Stilwert über das CSSText-Attribut
3. Caching-Layout-Attributwerte
Wenn Sie auf den Nicht-Referenztypwert (numerischer Typ) im Layout-Attribut mehrmals zugreifen müssen, können Sie ihn zunächst während eines Zugriffs in einer lokalen Variablen speichern und dann die lokale Variable verwenden Dies kann Vermeiden Sie es, das Attribut jedes Mal zu lesen. Verursacht Browser-Rendering.
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;
4. Stellen Sie die Position des Elements auf absolut oder fest ein
Wenn die Position des Elements statisch und relativ ist, befindet sich das Element in der DOM-Baumstruktur. Wenn eine Operation am Element ein erneutes Rendern erfordert, rendert der Browser die gesamte Seite. Wenn Sie die Position eines Elements auf „absolut“ und „fest“ festlegen, kann das Element unabhängig von der DOM-Baumstruktur existieren, und der Browser muss das Element und die darunter liegenden Elemente nur dann rendern, wenn er gerendert werden muss, wodurch sich die Zeit etwas verkürzt. Browser-Rendering-Zeit, was gerade heute angesichts der zunehmenden Anzahl von Javascript-Animationen eine Überlegung wert ist.
Das Obige sind einige Dinge, die ich persönlich zum Reduzieren von Browser-Reflow und Repaint zusammengefasst habe. Ich hoffe, dass es euch allen gefällt.
