Rendering: 10 Tipps mit denen sich Reflows reduzieren und die Performance verbessern lässt

Repaints, Reflows und die Frage nach der Performance
Kommentare

Grundsätzlich gilt: Je reibungsloser sich die Nutzung einer Applikation für den Nutzer gestaltet, desto besser ist in der Regel die User Experience – und desto höher ist am Ende die Conversion Rate. Je mehr Schnick-Schnack man aber seiner Website hinzufügt, desto größer wird sie auch, was oft besonders stark auf die Performance drückt.

Ein Problem ist dabei meist, dass Webdesigner gerne überflüssige CSS3-Animationen implementieren und mehrere DOM-Elemente manipulieren, ohne darüber nachzudenken, wie sich das auf die Performance der Website auswirken könnte. Häufige Repaints und Reflows sind dabei die Folge, und beides kann einen deutlichen Einfluss auf die Ladezeit haben – insbesondere, wenn CSS-Effekte die Ausführung von JavaScript beeinträchtigen. Dann nämlich kommt es zu den häufig von Usern monierten unresponsiven Interfaces oder abgehacktem Scrolling.
Wie kann man solche Reflows aber verringern und so die Performance verbessern? Craig Buckler hat dazu gleich zehn Tipps zusammengetragen, die dabei helfen sollen.

Repaints und Reflows – das ist der Unterschied

Um Nutzern eine gute User Experience ohne ruckeliges Scrollen oder unresponsive Interfaces bieten zu können, ist es wichtig, die Performance zu optimieren. Natürlich gibt es unzählige Tipps und Tricks, und die einschlägigen Checklisten und Best Practices zur Performance-Optimierung dürften eigentlich jedem Webdesigner bekannt sein. Was dabei häufig übersehen wird, ist jedoch, dass vor allem Repaints und Reflows die Performance deutlich beeinflussen.

Repaints

Repaints entstehen, wenn Elemente verändert werden, die nur die Sichtbarkeit, nicht aber das Layout beeinflussen. Dazu gehören zum Beispiel die Nutzung von opacity, background-color, visibility oder outline. Sie beeinflussen die Performance vor allem, weil der Browser die Sichtbarkeit aller anderen Nodes im DOM überprüfen muss – es könnte ja sein, dass eine oder mehrere unter dem geänderten Element sichtbar geworden sind.

Reflows

Einen noch viel größeren Einfluss auf die Performance nehmen allerdings Reflows. Dabei geht es vor allem um die Neuberechnung von der Position und der Dimension aller Elemente, die zum Neu-Rendern von Teilen oder gleich dem ganzen Dokument führen kann. Ausgelöst werden sie zum Beispiel beim Hinzufügen, Löschen oder Ändern von sichtbaren DOM-Elementen und CSS-Styles, durch die Nutzung von offsetWidth und offsetHeight, durch CSS3 Animationen- und –Transitions generell oder auch User Actions.

Gerade Reflows spielen dabei eine besonders große Rolle, darum sollten sie so gut es geht minimiert werden. Möglich wird das zum Beispiel, mit den zehn folgenden Tipps.

10 Tipps zum Minimieren von Reflows

Je nach Browser gibt es einige Unterschiede dabei, wie sie bestimmte Operationen ausführen; zudem sind einige Element deutlich aufwändiger zu rendern, als andere. Dementsprechend gibt es auch Unterschiede beim Reflow-Prozess und je nach Projekt können unterschiedliche Optimierungsmaßnahmen erforderlich sein. Trotzdem gibt es natürlich auch einige generelle Tipps, die beim Reduzieren von Reflows helfen können:

1.

Best-Practice-Layout-Techniken nutzen


Eigentlich sollte es sich von selbst verstehen: bei der Gestaltung des Layouts sollte auf die Nutzung von inline Styles und Tables verzichtet werden. Gerade Tabellen drücken auf die Performance, weil der Parser mehr als einen Pass benötigt, um die Zellen-Dimensionen zu kalkulieren. Auch die Verwendung von flexbox kann die Performance beeinflussen, weil sich die Positionen und Dimensionen von Flex-Items beim Download des HTML ändern können.

2.

Die Anzahl von CSS-Regeln minimieren


Je mehr CSS-Regeln verwendet werden, desto häufiger kommt es zu Reflows. Daher ist es ratsam, so wenige Regeln wie möglich zu verwenden, und auch auf die Nutzung von komplexen CSS-Selektoren sollte möglichst verzichtet werden. Gerade bei Frameworks wie Bootstrap kommt es dabei zu Problemen, weil nur wenige Websites mehr als einen kleinen Teil der zur Verfügung gestellten Styles nutzen.

3.

Die DOM-Tiefe minimieren


Ein wenig kniffliger wird es beim DOM. Doch auch hier können einige Optimierungen vorgenommen werden. So sollte die Größe des DOM-Trees und die Anzahl der Elemente in jedem Branch reduziert werden, um den Reflow zu beschleunigen. Wer keine älteren Browser unterstützen muss, kann dafür zum Beispiel unnötige Wrapper-Elemente entfernen.

4.

Tief im DOM-Tree liegende Klassen updaten


Klassenänderungen sollte immer bei Elementen vorgenommen werden, die möglichst weit unten im DOM-Tree stehen – sprich, bei Elementen, die nicht mehrere nested Children haben. Dadurch kann der Rahmen des Reflows auf wenige Nodes beschränkt werden.

5.

Komplexe Animationen aus dem Flow entfernen


Animationen sind zwar nett anzusehen, sorgen oft aber für unnötige Reflows. Darum sollte sichergestellt werden, dass sie nur zu einem einzigen Element hinzugefügt werden, indem sie mit position: absolute; oder position: fixed; aus dem Dokument-Flow entfernt werden. So können die Dimensionen und die Position modifiziert werden, ohne dass die Änderungen sich auch auf andere Elemente im Dokument auswirken.

6.

Versteckte Elemente modifizieren


Elemente, die mit display: none; versteckt sind, verursachen weder einen Repaint noch einen Reflow, wenn sie verändert werden. Sofern es möglich ist, sollten Änderungen des Elements vorgenommen werden, bevor es sichtbar gemacht wird.

7.

Elemente in einem Schwung updaten


Um die Performance zu verbessern und die Anzahl der Reflows zu minimieren, bietet es sich an, alle DOM-Elemente auf einmal in einem Abwasch zu updaten. Fügt man zum Beispiel eine Liste mit Stichpunkten hinzu, entstehen dabei bis zu sieben Reflows. Nutzt man stattdessen ein DOM-Fragment und erstellt die Nodes zunächst im Memory, lässt sich die Anzahl der Reflows auf einen reduzieren – und das sorgt nicht nur für eine bessere Performance, sondern ist auch einfacher zu maintainen.

8.

Die Anzahl der betroffenen Elemente begrenzen


Um die Performance nicht unnötig negativ zu beeinflussen, sollten am besten keine Situationen entstehen, in denen einen größere Anzahl von Elementen von Änderungen betroffen ist. So ist es zum Beispiel ratsam, bei Content-Controls, bei denen verschiedene, unterschiedlich hohe Content-Blöcke durch das Klicken eines Tabs aktiviert werden, mit einer fixen Höhe zu versehen. Dadurch lässt sich verhindern, dass auch die umliegenden Elemente von der Aktivierung der Content-Controls beeinflusst werden.

9.

Glatte Verläufe schaden der Performance


Ein Element pro Frame um nur ein Pixel zu bewegen, sorgt zwar beim User für den Anschein eines glatten Verlaufs, aber gerade auf älteren und langsameren Devices führt das zu einigen Problemen und unnötigem Reflow. Stattdessen sollte Elemente etwa vier Pixel pro Frame bewegt werden, wodurch der Reflow-Prozess nur noch ein Viertel beträgt – und nur geringfügig weniger flüssig erscheint.

10.

Repaint-Issues mit Browser-Tools analysieren


Alle gängigen Browser stellen ihre eigenen Developer-Tools zur Verfügung, die darstellen, wie Reflows die Performance beeinflussen. In Blink/Webkit-Browsern wie Chrome, Safari und Opera können die entsprechenden Informationen beispielsweise mit dem Timeline-Panel aufgezeichnet werden, und auch die Firefox Developer Tools sowie die F12 Developer Tools des Internet Explorers bieten ein ähnliches Feature an.

Es gibt also einige Möglichkeiten, wie man die Anzahl der Reflows reduzieren und so die Performance verbessern kann. Oder, wie Craig Buckler sagt:

Reduce your reflows and better performance will follow.

Die oben genannten Tipps dürften Entwicklern und Webdesignern dabei helfen, diese Arbeit in Angriff zu nehmen – immerhin macht eine gute Performance einen großen Teil einer guten User Experience aus. Und auf die kommt es ja schließlich bei einer Website an.

Aufmacherbild: von Shutterstock / Uhrheberrecht: VAlex „>Abstract 3d rendering of futuristic surface with hexagons. Sci-fi background. von Shutterstock / Urheberrecht: VAlex

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -