Niedawno Wilson Page napisał świetny artykuł dla Smashing Magazine, w którym opisał, jak powstała aplikacja internetowa Financial Times. W artykule Wilson pisze:
Gdy aplikacja zaczęła się rozwijać, zauważyliśmy, że jej wydajność jest coraz gorsza.
Po kilku godzinach spędzonych na przeglądaniu osi czasu w Narzędziach deweloperskich w Chrome udało nam się znaleźć winowajcę: — był to nasz nowy najlepszy przyjaciel, flexbox. Z wykresu czasowego wynikało, że niektóre układy zajmowały prawie 100 milisekund. Po przerobieniu układów bez flexboxu skróciliśmy ten czas do 10 milisekund!
Komentarze Wilsona dotyczyły pierwotnego (starszego) flexboxa, który używał display: box;. Niestety nie udało im się uzyskać odpowiedzi na pytanie, czy nowszy flexbox (display: flex;) jest szybszy, ale na stronie CSS Tricks Chris Coyier opublikował na ten temat pytanie.
Zapytaliśmy Ojana Vafai, który napisał większość implementacji w WebKit i Blink, o nowszy model i implementację flexboxa.
Nowy kod flexbox zawiera znacznie mniej ścieżek kodu układu z wielokrotnie wykonywanymi przejściami. Nadal możesz jednak łatwo trafić na ścieżki kodu z wiele przejść (np.
flex-align: stretchczęsto ma 2 przejścia). W ogóle powinno to być znacznie szybsze w typowym przypadku, ale możesz stworzyć przypadek, w którym będzie równie wolne.
Jeśli jednak możesz sobie na to pozwolić, zwykły układ blokowy (bez wypływania na bok) będzie zwykle tak samo szybki lub szybszy niż nowy flexbox, ponieważ jest zawsze jednoprzebiegowy. Nowy flexbox powinien jednak być szybszy niż tabele lub pisanie niestandardowego kodu układu na bazie JS.
Aby zobaczyć różnicę w liczbie, porównałem starą i nową składnię.
Porównanie starego i nowego benchmarku Flexbox
- Stary flexbox a nowy flexbox (z opcją zastępczą)
- 500 elementów na stronę
- ocenianie kosztu wczytania strony w celu rozmieszczenia elementów;
- średnia z 3 wyników
- zmierzone na komputerach stacjonarnych. (na urządzeniach mobilnych będzie to około 10 razy wolniej)
Stary flexbox: koszt układu ok.43,5 ms
Nowy flexbox: koszt układu ~18,2 ms
Podsumowanie: stara wersja jest 2,3 raza wolniejsza od nowej.
Co musisz zrobić?
Podczas korzystania z flexboxa zawsze pisz dla nowych funkcji: składnia tweener w IE 10 i nowy zaktualizowany flexbox, który jest dostępny w Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ i Blackberry 10+. W wielu przypadkach możesz użyć starszego flexboxa, aby obsługiwać starsze przeglądarki mobilne.
Pamiętaj: narzędzia, a nie zasady
Ważniejsze jest jednak zoptymalizowanie tego, co ma znaczenie. Zanim zaczniesz optymalizować jeden rodzaj operacji, zawsze korzystaj z osi czasu, aby zidentyfikować wąskie gardła.
Współpracowaliśmy z Wilsonem i zespołem Financial Times Labs, dzięki czemu udało nam się ulepszyć narzędzia do pomiaru wydajności układu w narzędziach deweloperskich Chrome. Wkrótce udostępnimy możliwość wyświetlania granicy przeprojektowania elementu. Zdarzenia układu na osi czasu są wczytywane z szczegółami dotyczącymi zakresu, korzenia i kosztów każdego układu:
