Vor einiger Zeit hat Wilson Page einen tollen Artikel für das Smashing Magazine verfasst, in dem es um die Entwicklung der Financial Times-Web-App geht. In dem Artikel stellt Wilson Folgendes fest:
Mit dem Wachstum der App stellten wir fest, dass die Leistung immer schlechter wurde.
Wir haben uns die Zeitleiste der Chrome-Entwicklertools angesehen und die Ursache gefunden: Schock, Horror! – es war unser neuer bester Freund, die Flexbox. Die Zeitachse zeigte, dass einige Layouts fast 100 Millisekunden benötigen. Durch die Überarbeitung unserer Layouts ohne Flexbox wurde dies auf 10 Millisekunden reduziert!
Wilsons Kommentare bezogen sich auf die ursprüngliche (ältere) Flexbox, in der display: box; verwendet wurde. Leider erhielten sie keine Gelegenheit zu antworten, ob die neuere Flexbox (display: flex;) schneller wäre, aber in Bezug auf CSS-Tricks hat Chris Coyier diese Frage gestellt.
Wir haben Ojan Vafai, der einen Großteil der Implementierung in WebKit & Blink geschrieben hat, nach dem neueren Flexbox-Modell und zur -Implementierung gefragt.
Der neue Flexbox-Code hat viel weniger Codepfade für das Layout mit mehreren Durchläufen. Codepfade mit mehreren Durchläufen lassen sich jedoch trotzdem recht einfach aufrufen (z.B. hat
flex-align: stretchoft einen 2-Pass). Im Allgemeinen sollte es viel schneller gehen, aber Sie können auch einen Fall erstellen, bei dem es genauso langsam ist.
Allerdings ist das reguläre Block-Layout (kein Gleitkommawert) in der Regel genauso schnell oder schneller als eine neue Flexbox, da es immer nur einen Durchlauf erfordert. Eine neue Flexbox sollte jedoch schneller sein als die Verwendung von Tabellen oder das Schreiben von benutzerdefiniertem JS-Basis-Layoutcode.
Um den Unterschied in den Zahlen zu sehen, habe ich die alte und die neue Syntax direkt miteinander verglichen.
Alte vs. neue Flexbox-Benchmark
- alte Flexbox und neue Flexbox (mit Fallback)
- 500 Elemente pro Seite
- die Kosten für den Seitenaufbau zu bewerten,
- gemittelt über je 3 Ausführungen
- auf Desktop-Computern gemessen. (Mobilgerät ist ca. 10-mal langsamer)
Alte Flexbox: Layoutkosten von ~43,5 ms
Neue Flexbox: Layoutkosten von ~18,2 ms
Zusammenfassung: Alt ist 2,3-mal langsamer als neue.
Was solltet ihr tun?
Wenn Sie die Flexbox verwenden, achten Sie immer auf die neuesten Entwicklungen: Die IE10-Tweener-Syntax und die neue aktualisierte Flexbox in Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ und Blackberry 10+. In vielen Fällen können Sie ein Fallback auf ältere Flexbox-Browser verwenden.
Denken Sie daran: Tools, nicht Regeln
Viel wichtiger ist die Optimierung, auf die es ankommt. Identifizieren Sie Engpässe immer anhand des Zeitplans, bevor Sie Zeit für die Optimierung einer Betriebsart aufwenden.
Wir haben uns mit Wilson und dem Financial Times Labs-Team verbunden und so die Abdeckung der Chrome-Entwicklertools in Bezug auf Layout-Performance-Tools verbessert. Bald wird eine Funktion hinzugefügt, mit der Sie die Begrenzung der Layoutänderung eines Elements ansehen können. Layout-Ereignisse in der Zeitachse werden mit Details zum Umfang, zum Stamm und zu den Kosten der einzelnen Layouts geladen:
