Układ Flexbox nie jest powolny

Paul Ireland

Jakiś czas temu Wilson Page napisał świetny artykuł dla magazynu Smashing, w którym wyjaśnia, jak powstała aplikacja internetowa Financial Times. W artykule Wilson zanotował:

Wraz z rozwojem aplikacji zauważyliśmy, że jej wydajność spada i pogarsza.

Spędziliśmy kilka godzin na osi czasu w Narzędziach deweloperskich w Chrome i znaleźliśmy przyczynę: szok, przerażenie. – to nasz nowy najlepszy przyjaciel, flexbox. Oś czasu wykazała, że niektóre układy trwały prawie 100 milisekund, a przerabianie układów bez taśmy skróciło się do 10 milisekund.

Komentarze Wilsona dotyczyły oryginalnej (starszej) funkcji Flexbox, która używała funkcji display: box;. Niestety nie udało im się uzyskać odpowiedzi, czy nowsze urządzenie typu Flexbox (display: flex;) było szybsze, ale w przypadku CSS Tricks Chris Coyier otworzył to pytanie.

Zapytaliśmy Ojana Vafaia, który napisał dużą część implementacji w WebKit & Blink, o nowszy model i implementację Flexbox.

Nowy kod Flexbox ma znacznie mniej ścieżek kodu w układzie wieloprzebiegowym. Mimo to nadal możesz łatwo trafić w kilka ścieżek kodowych z kilkoma przebiegami (np. flex-align: stretch jest często dwuprzebiegiem). W typowym przypadku powinno to działać znacznie szybciej, ale możesz też utworzyć przypadek, w którym powinno działać tak samo wolne.

Jeśli nie da się tego zrobić, zwykły układ bloków (nie pływających) będzie zwykle równie szybki lub taki sam jak nowy format Flexbox, ponieważ zawsze ma format jednoprzebiegowy. Nowy flexbox powinien być jednak szybszy niż używanie tabel czy pisanie niestandardowego kodu układu podstawowego JS.

Aby zobaczyć różnicę w liczbach, przeprowadziliśmy bezpośrednie porównanie składni starej i nowej.

Stara a nowa Flexbox porównawcza

  • stary flexbox a nowy flexbox (z zastępczą funkcją)
  • 500 elementów na stronę
  • ocenia koszt wczytywania strony i układa elementy
  • średnia z 3 runów
  • które są mierzone na komputerach. (na urządzeniach mobilnych będzie działać ok. 10 razy wolniej)

Stary flexbox: koszty układu wynoszące ok.43,5 ms


Przykład starego układu Flexbox

Nowy Flexbox: koszty układu wynoszą ok.18,2 ms


Przykład nowego układu Flexbox

Podsumowanie: stara jest 2,3 raza wolniejsza od nowego.

Co musisz zrobić?

Gdy korzystasz z flexboxa, zawsze pisz nowe informacje: składnia IE10 tweener i nowy zaktualizowany flexbox w Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ oraz BlackBerry 10+. W wielu przypadkach możesz wrócić do starszych przeglądarek mobilnych.

Pamiętaj: narzędzia, nie reguły

Ważniejsza jest optymalizacja tego, co ważne. Zanim poświęcisz czas na optymalizację jednego rodzaju operacji, zawsze korzystaj z osi czasu, aby zidentyfikować wąskie gardła.

Skontaktowaliśmy się z Wilsonem i zespołem Financial Times Labs, dzięki czemu zwiększyliśmy zasięg narzędzi deweloperskich w Chrome w zakresie narzędzi poprawiających wydajność układu. Wkrótce dodamy możliwość wyświetlania granicy przekazywania elementu, a zdarzenia układu na osi czasu są wczytywane ze szczegółami dotyczącymi zakresu, poziomu głównego i kosztu każdego układu:

Wyskakujące okienko układu wymuszonej synchronizacji