Il y a quelque temps, Wilson Page a rédigé un article très intéressant pour Smashing Magazine, dans lequel il explique comment son application Web a vu le jour. Dans cet article, Wilson fait remarquer:
Alors que l'application commençait à se développer, nous avons constaté une dégradation des performances.
Nous avons passé quelques heures dans le calendrier des outils pour les développeurs Chrome et avons identifié le coupable: choc, horreur ! c'était notre nouvelle meilleure amie, Flexbox. La timeline a montré que certaines mises en page prenaient près de 100 millisecondes ; le retravail de nos mises en page sans Flexbox a permis de réduire ce délai à 10 millisecondes !
Les commentaires de Wilson portaient sur le Flexbox d'origine (ancien) qui utilisait display: box;. Malheureusement, ils n'ont jamais eu l'occasion de répondre si la nouvelle Flexbox (display: flex;) était plus rapide, mais Chris Coyier a ouvert sa question pour répondre à des astuces sur les CSS.
Nous avons demandé à Ojan Vafai, qui a rédigé une grande partie de l'implémentation dans WebKit & Blink, de nous parler du nouveau modèle Flexbox et de son implémentation.
Le nouveau code Flexbox comporte beaucoup moins de chemins de code de mise en page multi-pass. Cependant, vous pouvez toujours facilement atteindre les chemins de code à plusieurs passages (par exemple,
flex-align: stretchcorrespond souvent à deux passages). Généralement, cette méthode est généralement beaucoup plus rapide, mais elle est tout aussi lente.
Cela dit, si vous pouvez vous en sortir, la mise en page en blocs standard (sans flottement) sera généralement aussi rapide ou plus rapide que le nouveau Flexbox, car il est toujours en un seul passage. Cependant, le nouvel flexbox devrait être plus rapide que d'utiliser des tableaux ou d'écrire un code de mise en page personnalisé basé sur JS.
Pour voir la différence en termes de nombres, j'ai effectué une comparaison directe entre l'ancienne et la nouvelle syntaxe.
Comparaison entre l'ancien et le nouveau benchmark Flexbox
- ancien circuit flexible et nouveau circuit flexible (avec solution de remplacement)
- 500 éléments par page
- évaluer le coût de chargement de la page pour disposer les éléments
- moyenne sur 3 exécutions chacune
- mesurées sur les ordinateurs de bureau. (le chargement sera environ 10 fois plus lent sur mobile)
Ancien Flexbox: coûts de mise en page d'environ 43,5 ms
Nouveau Flexbox: coûts de mise en page d'environ 18,2 ms
Résumé: les anciennes versions sont 2,3 fois plus lentes que les nouvelles versions.
Que devez-vous faire ?
Lorsque vous utilisez Flexbox, rédigez toujours les nouveautés: la syntaxe du tweener pour IE10 et la nouvelle boîte flexible mise à jour intégrée à Chrome 21, Safari 7 ou version ultérieure, Firefox 22 ou version ultérieure, Opera (et Opera Mobile) 12.1 ou version ultérieure, IE 11 ou une version ultérieure. Dans de nombreux cas, vous pouvez utiliser les anciens navigateurs pour mobile.
Rappel: des outils, pas des règles
Le plus important, c'est d'optimiser ce qui compte. Utilisez toujours la chronologie pour identifier les goulots d'étranglement avant de consacrer du temps à l'optimisation d'un type d'opération.
Nous avons contacté Wilson et l'équipe Labs du Financial Times, ce qui nous a permis d'améliorer la couverture des outils pour les développeurs Chrome en ce qui concerne 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 de la timeline seront chargés avec les détails du champ d'application, de la racine et du coût de chaque mise en page:
