Há algum tempo, Wilson Page escreveu um ótimo artigo para a Smashing Magazine sobre como eles criaram o app da Web do Financial Times. No artigo, Wilson observa:
Conforme o app começou a crescer, descobrimos que o desempenho estava piorando cada vez mais.
Passamos algumas horas na linha do tempo das Ferramentas para Desenvolvedores do Chrome e encontramos o culpado: que surpresa! — era nosso novo melhor amigo, o flexbox. A linha do tempo mostrou que alguns layouts estavam demorando quase 100 milissegundos. A reformulação dos layouts sem flexbox reduziu esse tempo para 10 milissegundos.
Os comentários de Wilson foram sobre o flexbox original (legado) que usava display: box;. Infelizmente, eles nunca tiveram a chance de responder se o flexbox mais recente (display: flex;) era mais rápido, mas no CSS Tricks, Chris Coyier abriu essa pergunta.
Perguntamos a Ojan Vafai, que escreveu grande parte da implementação no WebKit e no Blink, sobre o modelo e a implementação flexbox mais recentes.
O novo código flexbox tem muito menos caminhos de código de layout de várias passagens. No entanto, ainda é possível acessar caminhos de código de várias passagens com bastante facilidade (por exemplo,
flex-align: stretchgeralmente tem duas passagens). Em geral, ele deve ser muito mais rápido no caso comum, mas você pode criar um caso em que ele seja igualmente lento.
No entanto, se você puder, o layout de bloco regular (sem flutuação) geralmente será tão rápido ou mais rápido do que o novo flexbox, já que é sempre de passagem única. No entanto, o novo flexbox deve ser mais rápido do que usar tabelas ou escrever código de layout personalizado baseado em JS.
Para conferir a diferença nos números, fiz uma comparação direta entre a sintaxe antiga e a nova.
Comparativo de mercado do Flexbox antigo e novo
- Flexbox antigo x Flexbox novo (com fallback)
- 500 elementos por página
- avaliar o custo de carregamento da página para definir os elementos
- Média de três execuções
- medida em computadores. (o dispositivo móvel será cerca de 10 vezes mais lento)
Flexbox antigo: custos de layout de ~43,5 ms
Novo flexbox: custos de layout de ~18,2ms
Resumo: o antigo é 2,3 vezes mais lento que o novo.
O que você deve fazer?
Ao usar flexbox, sempre crie para as coisas novas: a sintaxe de tweener do IE10 e o novo flexbox atualizado que está no Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ e Blackberry 10+. Em muitos casos, é possível fazer uma substituição pelo flexbox legado para detectar alguns navegadores móveis mais antigos.
Lembre-se: ferramentas, não regras
O mais importante é otimizar o que importa. Sempre use a linha do tempo para identificar os gargalos antes de otimizar um tipo de operação.
Na verdade, nos conectamos com Wilson e a equipe do Financial Times Labs e, como resultado, melhoramos a cobertura das ferramentas de desempenho de layout do Chrome DevTools. Em breve, vamos adicionar a capacidade de visualizar o limite de relayout de um elemento, e os eventos de layout na linha do tempo são carregados com detalhes do escopo, da raiz e do custo de cada layout:
