Há pouco tempo, Wilson Page escreveu um ótimo artigo para a Smashing Magazine, investigando como a empresa deu vida ao app da Web Financial Times. No artigo, Wilson observa:
À medida que o app começava a crescer, percebemos que o desempenho estava ficando cada vez pior.
Passamos algumas horas na linha do tempo das Ferramentas para desenvolvedores do Chrome e encontramos o culpado: choque, terror! — foi nossa nova melhor amiga, o flexbox. A linha do tempo mostrou que alguns layouts levam quase 100 milissegundos. Reformular os layouts sem o flexbox reduziu isso 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;
) fosse mais rápido, mas Chris Coyier abriu essa pergunta sobre "Cricks do CSS".
Perguntamos a Ojan Vafai, que escreveu grande parte da implementação no WebKit e 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 passagem múltipla. Ainda é possível acessar caminhos de código de várias passagens com facilidade (por exemplo,
flex-align: stretch
geralmente é de duas passagens). Em geral, deve ser muito mais rápido no caso comum, mas você pode construir um caso em que seja igualmente lento.
Dito isso, se for possível, o layout de bloco normal (não flutuante) geralmente será tão rápido ou mais rápido do que o novo flexbox, já que ele é sempre de passagem única. Mas o novo flexbox é mais rápido do que usar tabelas ou escrever código personalizado de layout baseado em JS.
Para ver a diferença nos números, fiz uma comparação direta entre a sintaxe antiga e a nova.
Comparativo de mercado do Flexbox antigo x novo
- flexbox antigo x flexbox novo (com substituto)
- 500 elementos por página
- avaliar o custo de carregamento da página para posicionar os elementos
- média em 3 execuções cada
- medido em computadores. (dispositivos móveis serão 10 vezes mais lentos)
Flexbox antigo: custos de layout de ~43,5ms
Novo flexbox: custos de layout de ~18,2ms
Resumo: a versão antiga é 2,3 vezes mais lenta que a nova.
O que você deve fazer?
Ao usar o flexbox, sempre crie as novidades: a sintaxe de interpolação 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, você pode substituir alguns navegadores mais antigos para dispositivos móveis.
Lembre-se: ferramentas, não regras
O mais importante é otimizar o que realmente importa. Sempre use a linha do tempo para identificar seus gargalos antes de gastar tempo otimizando um tipo de operação.
Na verdade, conversamos com a Wilson e a equipe do Financial Times Labs e, como resultado, melhoramos a cobertura de ferramentas de desempenho de layout no Chrome DevTools. Em breve, vamos adicionar a capacidade de visualizar o limite de reformulação de um elemento, e os eventos de layout na linha do tempo serão carregados com detalhes do escopo, raiz e custo de cada layout: