Jakiś czas temu Wilson Page napisał ciekawy artykuł dla Smashing Magazine, w którym wyjaśnia, jak stworzył aplikację internetową Financial Times. W swoim artykule Wilson zauważa:
W miarę rozwoju aplikacji zauważyliśmy, że jej skuteczność rosła i pogarszała się.
Przez kilka godzin spędziliśmy kilka godzin na osi czasu narzędzi Chrome Developers Tools i znaleźliśmy sprawcę: szok, przerażenie! To nasz nowy najlepszy przyjaciel – Flexbox. Oś czasu pokazuje, że w niektórych układach trwało to prawie 100 milisekund, a modyfikacja układów bez Flexbox skróciła ten czas do 10 milisekund.
Komentarze Wilsona dotyczyły oryginalnego (starszego) Flexboxa, w którym używano display: box;. Niestety nie mieli szansy udzielić odpowiedzi, jeśli nowszy model flexbox (display: flex;) jest szybszy, ale w przypadku CSS Tricks zadał to pytanie.
Zapytaliśmy Ojana Vafaia, który napisał głównie o implementacji w WebKit i Blink, o nowszy model i implementację Flexbox.
Nowy kod Flexbox ma znacznie mniej ścieżek kodu w układzie wieloprzebiegowym. Mimo to można z łatwością korzystać z wieloprzebiegowych ścieżek kodu (np.
flex-align: stretchjest często dwuprzebiegową). W typowym przypadku zwykle powinno to być znacznie szybsze, ale w przypadku wersji równie powolnej.
Jednak jeśli jest to możliwe, standardowy układ blokowy (niepodmiotowy) będzie zazwyczaj tak szybki lub szybszy niż nowy Flexbox, ponieważ jest zawsze jednoprzebiegowy. Jednak nowa wersja flexbox powinna być szybsza niż korzystanie z tabel czy pisanie niestandardowego kodu układu JavaScript.
Aby zobaczyć różnicę w liczbie, przeprowadziłem bezpośrednie porównanie składni starej i nowej.
Porównanie starej i nowej wersji Flexbox
- stara wersja flexbox vs. nowa wersja flexbox (z reklamami zastępczymi)
- 500 elementów na stronę
- Pozwala oszacować koszty wczytywania strony w celu rozmieszczenia elementów
- średnia dla 3 biegów
- do pomiaru skuteczności na komputerach. (na urządzeniach mobilnych będzie około 10 razy wolniej)
Stary moduł flexbox: koszt układu ok.43,5 ms
Nowy flexbox: koszt układu ok.18,2 ms
Podsumowanie: stara wersja jest 2,3 raza wolniejsza niż nowa.
Co musisz zrobić?
Gdy korzystasz z Flexbox, zawsze twórz nowe rzeczy: składnia tweenera IE10 i nowy zaktualizowany panel Flexbox w Chrome 21+, Safari 7+, Firefox 22+, Opera (i Opera Mobile) 12.1+, IE 11+ i BlackBerry 10+. W wielu przypadkach można przejść na starsze wersje przeglądarek mobilnych.
Pamiętaj: narzędzia, a nie reguły
Ważniejsza jest optymalizacja tego, co ważne. Zawsze korzystaj z osi czasu, aby zidentyfikować wąskie gardła, zanim poświęcisz czas na optymalizację jednego rodzaju działań.
Skontaktowaliśmy się z Wilsonem i zespołem Financial Times Labs, w rezultacie zwiększyliśmy zakres narzędzi do obsługi układu w Narzędziach deweloperskich w Chrome. Wkrótce dodamy możliwość wyświetlania granicy przekazywania elementu, a zdarzenia układu na osi czasu będą wczytywane ze szczegółami zakresu, poziomu głównego i kosztu każdego układu:
