Flexbox-Layout ist nicht langsam

Paul Irish

Vor einiger Zeit hat Wilson Page einen großartigen Artikel für das Smashing Magazine verfasst, in dem es darum geht, wie die Financial Times-Web-App zum Leben erweckt wurde. In dem Artikel stellt Wilson fest:

Mit dem Wachstum der App stellten wir fest, dass die Leistung immer schlechter wurde.

Wir haben einige Stunden in der Zeitachse der Chrome-Entwicklertools verbracht und den Schuldigen gefunden: Schock, Horror! Es war unser neuer bester Freund, die Flexbox. Die Zeitachse zeigte, dass einige Layouts fast 100 Millisekunden in Anspruch nahmen. Durch die Überarbeitung unserer Layouts ohne Flexbox konnte dies auf 10 Millisekunden reduziert werden.

Wilsons Kommentare bezog sich auf die ursprüngliche (alte) Flexbox, in der display: box; verwendet wurde. Leider hatten sie nie eine Antwort darauf, ob die neue Flexbox (display: flex;) schneller war, aber Chris Coyier hat die Frage nach den CSS-Tricks geöffnet.

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 Layout-Codepfade mit mehreren Durchgängen. Du kannst Codepfade mit mehreren Durchgängen aber trotzdem ziemlich leicht verwenden (z.B. lautet flex-align: stretch oft oft 2-Pass-Code). Im Allgemeinen sollte dies im üblichen Fall viel schneller gehen, Sie können jedoch einen Fall konstruieren, bei dem er genauso langsam ist.

Wenn Sie damit durchkommen können, ist das reguläre Block-Layout (nicht Float) in der Regel genauso schnell oder schneller als die neue Flexbox, da es immer nur einen Durchlauf aufweist. Eine neue Flexbox sollte jedoch schneller sein als die Verwendung von Tabellen oder das Schreiben von benutzerdefiniertem JS-Basis-Layoutcode.

Um den Unterschied bei den Zahlen zu sehen, habe ich die alte und die neue Syntax miteinander verglichen.

Alte vs. neue Flexbox-Benchmark

  • alte Flexbox vs. neue Flexbox (mit Fallback)
  • 500 Elemente pro Seite
  • die Kosten für den Seitenaufbau bewerten, um die Elemente
  • gemittelt aus jeweils 3 Ausführungen
  • auf Desktop-Computern gemessen wird. (Mobilgerät ist etwa zehnmal langsamer)

Alte Flexbox: Layoutkosten von ca.43,5 ms


Beispiel für ein altes Flexbox-Layout

Neue Flexbox: Layoutkosten von etwa 18,2 ms


Beispiel für ein neues Flexbox-Layout

Zusammenfassung: „Alt“ ist 2,3-mal langsamer als das neue Modell.

Was solltet ihr tun?

Schreibe bei Verwendung der Flexbox immer für Neues: die Tweener-Syntax von IE10 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 kannst du ältere mobile Browser verwenden, um zur alten Flexbox zu wechseln.

Wichtig: Tools statt Regeln

Wichtiger ist jedoch die Optimierung, was wirklich zählt. Verwenden Sie immer die Zeitachse, um Ihre Engpässe zu identifizieren, bevor Sie Zeit damit verbringen, eine Art von Vorgang zu optimieren.

Wir haben uns mit Wilson und dem Financial Times Labs-Team zusammengetan und so die Abdeckung der Tools zur Layoutleistung in den Chrome-Entwicklertools verbessert. Demnächst wird die Möglichkeit hinzugefügt, die Begrenzung der Neuanordnung eines Elements anzusehen. Außerdem werden Layoutereignisse auf der Zeitachse mit Details zum Umfang, zum Grund und zu den Kosten jedes Layouts geladen:

Layout-Pop-up für erzwungene Synchronisierung