Vor einiger Zeit hat Wilson Page einen tollen Artikel für Smashing Magazine geschrieben, in dem er beschreibt, wie er die Webanwendung der Financial Times entwickelt hat. In dem Artikel stellt Wilson fest:
Als die App immer beliebter wurde, verschlechterte sich die Leistung immer mehr.
Wir haben einige Stunden in der Zeitachse der Chrome-Entwicklertools verbracht und den Schuldigen gefunden: – es war unser neuer bester Freund, Flexbox. Die Zeitachse zeigte, dass einige Layouts fast 100 Millisekunden in Anspruch nahmen. Durch die Überarbeitung unserer Layouts ohne Flexbox konnten wir diese Zeit auf 10 Millisekunden reduzieren.
Wilsons Kommentare betrafen das ursprüngliche (alte) Flexbox-System, bei dem display: box; verwendet wurde. Leider hatte er keine Gelegenheit, zu beantworten, ob das neuere Flexbox (display: flex;) schneller ist. Chris Coyier hat diese Frage aber auf CSS Tricks aufgeworfen.
Wir haben Ojan Vafai, der einen Großteil der Implementierung in WebKit und Blink geschrieben hat, zum neueren Flexbox-Modell und zur Implementierung befragt.
Der neue Flexbox-Code enthält viel weniger Codepfade für Layouts mit mehreren Durchläufen. Es ist jedoch ziemlich einfach, Codepfade mit mehreren Durchläufen zu erreichen (z.B.
flex-align: stretchist oft ein 2-Pass-Codepfad). Im Allgemeinen sollte es im Normalfall viel schneller sein, aber Sie können einen Fall konstruieren, in dem es genauso langsam ist.
Wenn es möglich ist, ist das normale Block-Layout (ohne Float) in der Regel genauso schnell oder schneller als das neue Flexbox-Layout, da es immer nur einen Durchlauf gibt. Das neue Flexbox-Layout sollte jedoch schneller sein als die Verwendung von Tabellen oder das Schreiben benutzerdefinierten JS-basierten Layoutcodes.
Um den Unterschied in den Zahlen zu sehen, habe ich die alte und die neue Syntax direkt verglichen.
Alter und neuer Flexbox-Benchmark im Vergleich
- Altes Flexbox im Vergleich zu neuem Flexbox (mit Fallback)
- 500 Elemente pro Seite
- die Seitenladezeit für die Anordnung der Elemente bewerten
- Mittelung aus jeweils 3 Durchläufen
- gemessen auf dem Computer. (auf Mobilgeräten etwa 10-mal langsamer)
Altes Flexbox: Layoutkosten von ungefähr 43,5 ms
Neues Flexbox: Layoutkosten von ca.18,2 ms
Zusammenfassung: Die alte Version ist 2,3-mal langsamer als die neue.
Was solltest du tun?
Wenn Sie Flexbox verwenden, sollten Sie immer die neuen Funktionen verwenden: die IE10-Tweener-Syntax und die neue aktualisierte Flexbox-Version, die in Chrome 21 und höher, Safari 7 und höher, Firefox 22 und höher, Opera (& Opera Mobile) 12.1 und höher, IE 11 und höher und Blackberry 10 und höher unterstützt wird. In vielen Fällen können Sie auf die alte Flexbox-Version zurückgreifen, um ältere mobile Browser zu unterstützen.
Denken Sie daran: Tools, keine Regeln
Wichtiger ist es, das zu optimieren, was wirklich zählt. Verwenden Sie immer die Zeitachse, um Engpässe zu identifizieren, bevor Sie Zeit für die Optimierung einer bestimmten Art von Vorgang aufwenden.
Wir haben uns mit Wilson und dem Financial Times Labs-Team in Verbindung gesetzt und so die Abdeckung der Layout-Leistungstools in den Chrome DevTools verbessert. Demnächst können Sie sich die Grenzen für das Neulayout eines Elements ansehen. Layoutereignisse in der Zeitachse enthalten dann Details zum Umfang, zum Stamm und zu den Kosten jedes Layouts:
