La mise en page Flexbox n'est pas lente

Paul Irish

Il y a quelque temps, Wilson Page a rédigé un excellent article pour le magazine Smashing Magazine sur la façon dont il a donné vie à l'application Web du Financial Times. Dans cet article, Wilson fait remarquer:

Au fur et à mesure que l'application commençait à se développer, nous avons constaté que les performances devenaient de plus en plus mauvaises.

Nous avons passé quelques heures dans la chronologie des outils pour les développeurs Chrome et nous avons trouvé le coupable: choc, horreur ! c'était notre nouveau meilleur ami, Flexbox. La chronologie a montré que certaines mises en page prenaient près de 100 millisecondes ; retravailler nos mises en page sans Flexbox a réduit cette durée à 10 millisecondes !

Les commentaires de Wilson concernaient l'(ancienne) version Flexbox d'origine qui utilisait display: box;. Malheureusement, si la nouvelle Flexbox (display: flex;) était plus rapide, ils n'ont jamais eu l'occasion de répondre à cette question, mais au sujet de CSS Tricks, Chris Coyier a ouvert la question.

Nous avons interrogé Ojan Vafai, qui a rédigé une grande partie de l'implémentation dans WebKit & Blink, sur le nouveau modèle Flexbox et son implémentation.

Le nouveau code Flexbox comporte beaucoup moins de chemins de code de mise en page en plusieurs passages. Vous pouvez toujours utiliser des chemins de code en plusieurs passages assez facilement (par exemple, flex-align: stretch est souvent en deux passages). En règle générale, cela devrait être beaucoup plus rapide dans le cas courant, mais vous pouvez construire un cas où elle sera tout aussi lente.

Cela dit, si vous pouvez vous en sortir, la mise en page de blocs standard (non flottante) sera généralement aussi rapide que la nouvelle Flexbox, car elle se fait toujours en un seul passage. Cependant, le nouveau Flexbox devrait être plus rapide que d'utiliser des tables ou d'écrire du code de mise en page JS de base personnalisé.

Pour voir la différence entre les chiffres, j'ai comparé l'ancienne et la nouvelle syntaxe.

Comparaison entre l'ancienne et la nouvelle Flexbox

  • ancienne flexbox par rapport à la nouvelle Flexbox (avec solution de remplacement)
  • 500 éléments par page
  • Évaluer le coût de chargement de la page pour mettre en page les éléments
  • moyenne sur 3 courses chacune
  • mesurées sur les ordinateurs. (le mobile sera environ 10 fois plus lent)

Ancienne version Flexbox: coûts de mise en page d'environ 43,5 ms


Ancien exemple de mise en page Flexbox

Nouvelle Flexbox: coûts de mise en page d'environ 18,2 ms


Nouvel exemple de mise en page Flexbox

Résumé: l'ancienne est 2,3 fois plus lente que la nouvelle.

Que devez-vous faire ?

Lorsque vous utilisez Flexbox, utilisez toujours la syntaxe tweener IE10 et le nouveau Flexbox mis à jour dans Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ et BlackBerry 10+. Dans de nombreux cas, vous pouvez utiliser les anciens navigateurs Flex.

N'oubliez pas: les outils, pas les règles

Le plus important, c'est d'optimiser ce qui compte. Identifiez toujours les goulots d'étranglement à l'aide de la chronologie avant de consacrer du temps à l'optimisation d'un type d'opération.

Nous avons d'ailleurs contacté Wilson et l'équipe du Financial Times Labs, ce qui nous a permis d'améliorer la couverture des outils pour les développeurs Chrome concernant les outils de gestion des performances de mise en page. Nous ajouterons bientôt la possibilité d'afficher les limites de remise en page d'un élément. Les événements de mise en page dans la timeline contiennent des informations sur le champ d'application, la racine et le coût de chaque mise en page:

Pop-up de synchronisation forcée de la mise en page