O layout do Flexbox não é lento

PaulIrlandês

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


Exemplo antigo de layout flexível

Novo flexbox: custos de layout de ~18,2ms


Exemplo de novo layout flexbox

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:

Pop-up de layout de sincronização forçada