Performance von Websites & Browser “Reflows”

reflow

Über ein Web-Performance Video von Paul Irish (der Schöpfer des HTML5 Boilerplate) bin ich auf das Thema “Reflows” aufmerksam geworden und fand es ganz interessant, auch wenn wahrscheinlich diese Performance-Optimierung eher zur Sorte “Cutting-Edge” gehört Zwinkerndes Smiley 

Was ist ein “Reflow”?

Der “Reflow” ist der Prozess in dem der Brower die einzelnen Elemente positioniert und rendert. Jedes Element des DOM Trees muss überprüft werden, ob es gerendert werden muss oder nicht. Um diesen Prozess zu veranschaulichen wird in diesem Video der Seitenaufbau von Google genauer dargestellt – man sieht deutlich die “Elemente” und Rendering-Schritte bis zur fertigen Seite:

“Schlechtes Beispiel”

Im oberen Video hat man gesehen, dass alle Elemente von Anfang an eigentlich “ordentlich” positioniert sind, als schlechteres Beispiel dient (oder diente?) die Mozilla Website. Aber der Sekunde 10 wird das eigentlich fertige Raster nochmal neu angeordnet – in diesem Fall wird ein Großteil der Seite nochmal gerendert, was das Rendering natürlich verlangsamt:

 

Ein weiteres Beispiel wäre noch die Wikipedia S

Was stößt einen Reflow an?

Im Grunde ist es logisch, dass der Browser die Seite neu rendern muss, wenn ich DOM Elemente manipuliere oder neue Elemente einfüge. Insbesondere wenn man via Javascript die DOM manipuliert, kann man aber einiges “falsch” machen.

eite.

Was sollte man machen um unnötige Reflows zu vermeiden?

Einige allgemeine Hinweise gibt es von Google:

  1. “Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree – all the way up to the root, and all the the way down into the children of the modified node. This leads to more time being spent performing reflow.
  2. Minimize CSS rules, and remove unused CSS rules.
  3. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this.
  4. Avoid unnecessary complex CSS selectors – descendant selectors in particular – which require more CPU power to do selector matching.

 

Auch auf der Opera Developer Seite sind einige Tipps aufgeschlüsselt.

Häufigster “Fehltritt”: Wenn man ein DOM verändert und hinterher z.B. den offset des Elements beziehen möchte macht der Browser 2 “reflows” – jegliches Messen von “Größen/Werten” stößt diesen Prozess an. Auch bei einer Manipulation bietet es sich an, dass Element zu clonen und jegliche Operationen auf dem “unsichtbaren” Clone durchzuführen und erst am Ende das Element mit dem Original zu ersetzen.

Weitere gute Tipps zu dem Thema findet ihr hier.

Woran erkenne ich Reflows?

Man kann es z.B. in den Chrome Developer Tools sehen: Bei “Recalculate Style” findet ein Reflow statt – ob und inwiefern das “böse” ist, muss man genauer anschauen, allerdings kann man z.B. bei der DOM Manipulierung via Javascript sicherlich ein paar Sachen besser machen Smiley

image

TL;DR – Linkliste

- Google Speed Seite zum Thema

- Opera Seite mit Tipps für DOM Manipulation

- Mozilla Seite mit Tipps

- Noch eine Seite mit Tipps

Mehr über Web-Performance?

In dem Video von Paul Irish gibt es noch weitere interessante Tipps zum Thema Web Tuning:

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

Comment on this post

Letzte Posts

  • image.png
    Azure AppInsights: Ein mini Google Analytics für Websites

    Seit der Build Konferenz ist das neue Azure Portal für alle freigeschaltet. Durch das neue Portal ist mir ein “Dienst” aufgefallen, den ich bisher nicht gesehen hatte: Azure Application Insights Viel weiss ich nicht über den Dienst, aber wer eine Azure Website hat der sollte mal die “Analytics” Box öffnen. Im Grunde handelt es sich […]

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

Amazon Shop

Facebook