Een tijdje geleden schreef Wilson Page een geweldig artikel voor Smashing Magazine, waarin hij inging op hoe ze de webapp van de Financial Times tot leven brachten. In het artikel merkt Wilson op:
Naarmate de app begon te groeien, merkten we dat de prestaties steeds slechter werden.
We hebben een paar uur doorgebracht in de tijdlijn van Chrome Developers Tools en hebben de boosdoener gevonden: Shock, horror! — het was onze nieuwe beste vriend, flexbox. Uit de tijdlijn bleek dat sommige lay-outs bijna 100 milliseconden in beslag namen; het herwerken van onze lay-outs zonder flexbox bracht dit terug naar 10 milliseconden!
Wilsons opmerkingen gingen over de originele (verouderde) flexbox die gebruik maakte display: box; . Helaas kregen ze nooit de kans om te antwoorden of de nieuwere flexbox ( display: flex; ) sneller was, maar bij CSS Tricks opende Chris Coyier die vraag .
We vroegen Ojan Vafai , die een groot deel van de implementatie in WebKit & Blink schreef, naar het nieuwere flexbox-model en de implementatie.
De nieuwe flexbox-code heeft veel minder lay-outcodepaden met meerdere doorgangen. Je kunt echter nog steeds vrij gemakkelijk codepaden met meerdere doorgangen bereiken (bijvoorbeeld
flex-align: stretchis vaak 2-pass). Over het algemeen zou het in het gewone geval veel sneller moeten zijn, maar je kunt een geval construeren waarin het net zo langzaam is.
Dat gezegd hebbende, als je ermee weg kunt komen, zal de reguliere blokindeling (niet-zwevend) meestal net zo snel of zelfs sneller zijn dan de nieuwe flexbox, omdat deze altijd single-pass is. Maar de nieuwe flexbox zou sneller moeten zijn dan het gebruik van tabellen of het schrijven van aangepaste JS-basislay-outcode.
Om het verschil in cijfers te zien, heb ik een directe vergelijking gemaakt tussen de oude en de nieuwe syntaxis.
Oude versus nieuwe Flexbox Benchmark
- oude flexbox versus nieuwe flexbox (met fallback)
- 500 elementen per pagina
- het evalueren van de laadkosten van de pagina om de elementen op te maken
- gemiddeld over 3 runs elk
- gemeten op desktop. (mobiel zal ~10x langzamer zijn)
Oude flexbox: opmaakkosten van ~43,5ms
Nieuwe flexbox: opmaakkosten van ~18,2 ms
Samenvatting: Oud is 2,3x langzamer dan nieuw.
Wat zou je moeten doen?
Wanneer u flexbox gebruikt, schrijf dan altijd op de nieuwe dingen : de IE10 tweener-syntaxis en de nieuwe bijgewerkte flexbox in Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ en Blackberry 10 +. In veel gevallen kunt u terugvallen op de oude flexbox om enkele oudere mobiele browsers op te halen.
Onthoud: hulpmiddelen, geen regels
Wat belangrijker is, is het optimaliseren van wat er toe doet. Gebruik altijd de tijdlijn om uw knelpunten te identificeren voordat u tijd besteedt aan het optimaliseren van één soort operatie.
We hebben zelfs contact gehad met Wilson en het Financial Times Labs-team en als gevolg daarvan de Chrome DevTools-dekking van tooling voor lay-outprestaties verbeterd. We zullen binnenkort de mogelijkheid toevoegen om de relayout-grens van een element te bekijken , en lay-outgebeurtenissen in de tijdlijn worden geladen met details over het bereik, de hoofdmap en de kosten van elke lay-out:
