Il y a quelque temps, Wilson Page a écrit un excellent article pour Smashing Magazine expliquant comment il a donné vie à l'application Web du Financial Times. Dans cet article, Wilson note:
À mesure que l'application a commencé à se développer, nous avons constaté que ses performances se dégradaient de plus en plus.
Nous avons passé plusieurs heures dans le journal des outils pour les développeurs Chrome et avons trouvé le coupable: choc, horreur ! Il s'agissait de notre nouveau meilleur ami, Flexbox. La chronologie a montré que certaines mises en page prenaient près de 100 millisecondes. En retravaillant nos mises en page sans flexbox, nous avons réduit ce temps à 10 millisecondes.
Les commentaires de Wilson concernaient la flexbox d'origine (ancienne) qui utilisait display: box;. Malheureusement, il n'a jamais eu l'occasion de répondre à la question de savoir si la nouvelle version de Flexbox (display: flex;) était plus rapide, mais sur CSS Tricks, Chris Coyier a ouvert cette question.
Nous avons demandé à Ojan Vafai, qui a écrit une grande partie de l'implémentation dans WebKit et Blink, de nous parler du nouveau modèle et de l'implémentation de Flexbox.
Le nouveau code Flexbox comporte beaucoup moins de chemins de code de mise en page multipass. Vous pouvez toutefois atteindre assez facilement des chemins de code à plusieurs passes (par exemple,
flex-align: stretchest souvent à deux passes). En général, il devrait être beaucoup plus rapide dans le cas le plus courant, mais vous pouvez créer un cas où il est tout aussi lent.
Toutefois, si vous pouvez vous en passer, la mise en page de blocs standard (non flottante) est généralement aussi rapide ou plus rapide que la nouvelle mise en page flexbox, car elle est toujours en une seule étape. Toutefois, le nouveau flexbox devrait être plus rapide que l'utilisation de tableaux ou l'écriture de code de mise en page personnalisé basé sur JS.
Pour voir la différence entre les chiffres, j'ai comparé l'ancienne et la nouvelle syntaxe.
Comparaison entre l'ancienne et la nouvelle version de Flexbox
- Ancien Flexbox par rapport au nouveau 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 trois exécutions chacune
- mesurée sur ordinateur. (le mobile sera environ 10 fois plus lent)
Ancienne version de Flexbox: coûts de mise en page de ~43,5 ms
Nouveau flexbox: coûts de mise en page de ~18,2 ms
Résumé: L'ancienne version est 2,3 fois plus lente que la nouvelle.
Que devez-vous faire ?
Lorsque vous utilisez Flexbox, créez toujours des éléments pour les nouvelles fonctionnalités: la syntaxe de l'outil de transition IE10 et la nouvelle version de Flexbox disponible dans Chrome 21 et versions ultérieures, Safari 7 et versions ultérieures, Firefox 22 et versions ultérieures, Opera (& Opera Mobile) 12.1 et versions ultérieures, IE 11 et versions ultérieures, et Blackberry 10 et versions ultérieures. Dans de nombreux cas, vous pouvez revenir à l'ancienne version de Flexbox pour prendre en charge certains anciens navigateurs mobiles.
N'oubliez pas: des outils, pas des règles
L'essentiel est d'optimiser ce qui compte. Utilisez toujours la chronologie pour identifier vos goulots d'étranglement avant de passer du temps à optimiser un type d'opération.
Nous avons contacté Wilson et l'équipe Financial Times Labs, et avons ainsi amélioré la couverture des outils de performances de mise en page dans les outils de développement Chrome. Nous allons bientôt ajouter la possibilité d'afficher la limite de redisposition d'un élément. Les événements de mise en page de la chronologie sont chargés avec des informations sur la portée, la racine et le coût de chaque mise en page:
