Há pouco tempo, Wilson Page escreveu um ótimo artigo para a Smashing Magazine explorando como eles deram vida ao aplicativo da Web Financial Times. No artigo, Wilson observa:
Conforme o app começou a crescer, percebemos que o desempenho estava piorando.
Passamos algumas horas na linha do tempo das Ferramentas para desenvolvedores do Chrome e descobrimos o culpado: choque, terror! era nosso novo melhor amigo, o flexbox. A linha do tempo mostrou que alguns layouts estavam levando quase 100 milissegundos; a reformulação de nossos layouts sem flexbox reduziu esse tempo para 10 milissegundos.
Os comentários de Wilson eram sobre o flexbox original (legado) que usava display: box;. Infelizmente, eles nunca tiveram a chance de responder se o novo flexbox (display: flex;) fosse mais rápido, mas Chris Coyier abriu essa pergunta sobre a ferramenta CSS Trucks.
Perguntamos a Ojan Vafai, que escreveu grande parte da implementação no WebKit & Blink, sobre o novo modelo flexbox e a implementação.
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 facilidade (por exemplo,
flex-align: stretchgeralmente tem duas passagens). Em geral, deve ser muito mais rápido no caso comum, mas é possível construir um caso em que seja igualmente lento.
Se for possível, o layout de blocos regular (não flutuante) geralmente será tão rápido quanto mais rápido do que o novo flexbox, já que ele é sempre de passagem única. Mas o novo flexbox deve ser mais rápido do que usar tabelas ou escrever código de layout personalizado base do JS.
Para ver a diferença nos números, fiz uma comparação entre a sintaxe antiga e a nova.
Comparativo de mercado antigo e novo do Flexbox
- flexbox antigo x novo flexbox (com substituto)
- 500 elementos por página
- avaliar o custo de carregamento da página para posicionar os elementos
- média de 3 execuções cada
- medido em computadores. (dispositivos móveis serão aproximadamente 10 vezes mais lentos)
Flexbox antigo: custos de layout de ~43,5ms
Novo flexbox: custos de layout de ~18,2 ms
Resumo: o antigo é 2,3x mais lento que o novo.
O que você deve fazer?
Ao usar o flexbox, crie sempre as novidades: a sintaxe do IE10 e o novo flexbox atualizado que está disponível no Chrome 21+, Safari 7+, Firefox 22+, Opera (e Opera Mobile) 12.1+, IE 11+ e Blackberry 10+. Em muitos casos, é possível fazer uma substituição dos navegadores flexbox 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 gastar tempo otimizando um tipo de operação.
Na verdade, entramos em contato com o Wilson e a equipe do Financial Times Labs e, como resultado, melhoramos a cobertura das ferramentas de desempenho de layout no Chrome DevTools. Em breve, adicionaremos a capacidade de ver o limite de reordenação de um elemento. Os eventos de layout na linha do tempo serão carregados com detalhes do escopo, da raiz e do custo de cada layout:
