Desempenho de renderização

Os usuários percebem se os sites e apps não funcionam bem. Por isso, é essencial otimizar o desempenho da renderização.

Os usuários da Web atual esperam que as páginas visitadas sejam interativas e suaves. Por isso, você precisa concentrar cada vez mais seu tempo e esforço. Além de carregar rapidamente, as páginas também precisam responder rapidamente às entradas do usuário durante todo o ciclo de vida. Na verdade, esse aspecto da experiência do usuário é exatamente o que a métrica Interaction to Next Paint (INP) mede. Uma boa INP significa que a página atendeu às necessidades do usuário de maneira consistente e confiável.

Um componente importante do que faz uma página parecer ágil envolve a quantidade de JavaScript que você executa em resposta às interações do usuário, mas o que os usuários estão prevendo são mudanças visuais na interface do usuário. As mudanças visuais em uma interface do usuário são resultado de vários tipos de trabalho, geralmente chamados de renderização, e esse trabalho precisa acontecer o mais rápido possível para que a experiência do usuário pareça rápida e confiável.

Para criar páginas que respondam rapidamente às interações do usuário, é necessário entender como HTML, JavaScript e CSS são processados pelo navegador e garantir que o código escrito, bem como qualquer outro código de terceiros incluído, seja executado com a maior eficiência possível.

Observação sobre as taxas de atualização do dispositivo

Um usuário interagindo com um site em um smartphone.
A taxa de atualização de uma tela é uma consideração importante quando se trata de criar sites responsivos à entrada do usuário.

Atualmente, a maioria dos dispositivos atualiza a tela 60 vezes por segundo. Cada atualização produz a saída visual que você vê, e é mais conhecida como um frame. No vídeo a seguir, demonstramos o conceito de frames:

Frames conforme mostrado no painel de desempenho do Chrome DevTools. À medida que o cursor passa sobre a tira de filme perto da parte de cima, uma representação ampliada de cada frame é mostrada em uma dica enquanto um menu de navegação para dispositivos móveis é animado para o estado "aberto".

Embora a tela de um dispositivo sempre seja atualizada a uma taxa consistente, os aplicativos executados em um dispositivo nem sempre conseguirão produzir frames suficientes para corresponder a essa taxa. Por exemplo, se houver uma animação ou transição em execução, o navegador vai precisar corresponder à taxa de atualização do dispositivo para produzir um frame para cada vez que a tela for atualizada.

Como uma tela típica é atualizada 60 vezes por segundo, alguns cálculos rápidos revelam que o navegador tem 16,66 milissegundos para produzir cada frame. No entanto, na realidade, o navegador tem sua própria sobrecarga para cada frame, então todo o trabalho precisa ser concluído em 10 milissegundos. Quando esse orçamento não é alcançado, o frame rate cai e o conteúdo da página trepa na tela. Esse fenômeno costuma ser chamado de instabilidade.

No entanto, seus destinos mudam com base no tipo de trabalho que você está tentando fazer. Atender ao limite de 10 milissegundos é crucial para animações, em que os objetos na tela são interpolados por uma série de frames entre dois pontos. Quando se trata de mudanças discretas na interface do usuário, ou seja, passar de um estado para outro sem nenhum movimento, é recomendável que você faça essas mudanças em um período que pareça instantâneo para o usuário. Nesses casos, 100 milissegundos é um número muito citado, mas o limite de "bom" da métrica INP é de 200 milissegundos ou menos para acomodar uma variedade maior de dispositivos com recursos variados.

Seja qual for seu objetivo, seja produzir os muitos frames que as animações exigem para evitar instabilidade ou simplesmente produzir uma mudança visual discreta na interface do usuário o mais rápido possível, entender como o pipeline de pixels do navegador funciona é essencial para seu trabalho.

O pipeline de pixels

Há cinco áreas principais que você precisa conhecer e considerar em seu trabalho como desenvolvedor da Web. Essas cinco áreas são aquelas sobre as quais você tem maior controle, e cada uma representa um ponto-chave no pipeline de pixels para a tela:

O pipeline de pixels completo, contendo cinco etapas: JavaScript, Estilo, Layout, Pintura e Composição.
Ilustração do pipeline de pixels completo.
  • JavaScript:normalmente, o JavaScript é usado para processar trabalhos que resultam em mudanças visuais na interface do usuário. Por exemplo, pode ser a função animate do jQuery, classificar um conjunto de dados ou adicionar elementos DOM à página. No entanto, o JavaScript não é estritamente necessário para acionar mudanças visuais: as animações CSS, as transições CSS e a API Web Animations (link em inglês) são capazes de animar o conteúdo da página.
  • Cálculos de estilo:esse é o processo de descoberta de quais regras CSS se aplicam a quais elementos HTML com base nos seletores correspondentes. .headline é um exemplo de seletor de CSS que se aplica a qualquer elemento HTML com um valor de atributo class que contenha uma classe de headline. A partir daí, quando as regras são conhecidas, elas são aplicadas e os estilos finais de cada elemento são calculados.
  • Layout:depois que o navegador sabe quais regras se aplicam a um elemento, ele pode começar a calcular a geometria da página, como quanto espaço os elementos ocupam e onde eles aparecem na tela. O modelo de layout da Web significa que um elemento pode afetar outros. Por exemplo, a largura do elemento <body> normalmente afeta as dimensões dos elementos filhos em toda a árvore. Por isso, o processo pode ser bastante pesado para o navegador.
  • Pintura:a pintura é o processo de preencher pixels. Isso envolve desenhar texto, cores, imagens, bordas, sombras e, essencialmente, todos os aspectos visuais dos elementos depois que o layout na página for calculado. O desenho é normalmente feito em várias superfícies, frequentemente chamadas de camadas.
  • Composto:como as partes da página podem ter sido desenhadas em várias camadas, elas precisam ser aplicadas à tela na ordem correta para que a página seja renderizada conforme o esperado. Isso é especialmente importante para elementos que se sobrepõem a outro, já que um erro pode fazer com que um elemento apareça sobre outro incorretamente.

Cada uma dessas partes do pipeline de pixels representa uma oportunidade para introduzir instabilidade nas animações ou atrasar a pintura de frames, mesmo para mudanças visuais discretas na interface do usuário. Portanto, é importante entender exatamente quais partes do pipeline seu código aciona e investigar se é possível limitar as alterações apenas às partes do pipeline de pixel que são necessárias para renderizá-las.

Você pode ter ouvido o termo "rasterizar" em conjunto com "pintar". Isso acontece porque a pintura é, na verdade, duas tarefas:

  1. Criar uma lista de chamadas de desenho.
  2. Preenchimento dos pixels.

Essa última é chamada de "rasterização". Portanto, sempre que você vir registros de pintura no DevTools, pense neles como a rasterização. Em algumas arquiteturas, a criação da lista de chamadas de desenho e a varredura é feita em diferentes linhas de execução, mas isso não está sob seu controle como desenvolvedor.

Você nem sempre precisa tocar em todas as partes do pipeline em todos os frames. Na verdade, há três maneiras de o pipeline funcionar normalmente em um determinado frame quando você faz uma mudança visual: com JavaScript, CSS ou a API Web Animations.

1. JS / CSS > Estilo > Layout > Pintar > Compor

O pipeline de pixels completo, sem nenhuma das etapas omitidas.

Se você mudar uma propriedade de layout, como aquela que muda a geometria de um elemento, como largura, altura ou posição (como as propriedades de CSS left ou top), o navegador precisa verificar todos os outros elementos e fazer um reflow da página. Todas as áreas afetadas precisarão ser pintadas de novo, e os elementos finalizados terão que ser compostos novamente.

2. JS / CSS > Estilo > Pintura > Compor

O pipeline de pixels com a etapa de layout omitida.

Se você mudar uma propriedade "somente pintura" para um elemento no CSS (por exemplo, propriedades como background-image, color ou box-shadow), a etapa de layout não será necessária para confirmar uma atualização visual na página. Ao omitir a etapa de layout, sempre que possível, você evita trabalhos de layout potencialmente caros que poderiam ter contribuído significativamente com a latência na produção do próximo frame.

3. JS / CSS > Estilo > Composto

O pipeline de pixels com as etapas de layout e pintura omitidas.

Se você mudar uma propriedade que não exige layout ou pintura, o navegador poderá pular diretamente para a etapa de composição. Esse é o caminho mais barato e desejável pelo pipeline de pixels para pontos de alta pressão no ciclo de vida de uma página, como animações ou rolagem. Curiosidade: o Chromium otimiza a rolagem da página para que ela ocorra exclusivamente na linha de execução do compositor sempre que possível. Isso significa que, mesmo que uma página não esteja respondendo, você ainda poderá rolar a página e ver partes dela que foram desenhadas anteriormente na tela.

O desempenho na Web é a arte de evitar trabalho e, ao mesmo tempo, aumentar a eficiência de qualquer trabalho necessário. Em muitos casos, basta trabalhar com o navegador, não contra ele. É importante lembrar que o trabalho mostrado anteriormente no pipeline difere em termos de custo computacional. Algumas tarefas são inerentemente mais caras que outras.

Vamos conhecer em detalhes as diferentes partes do pipeline. Vamos dar uma olhada nos problemas comuns e em como diagnosticá-los e corrigi-los.

Otimizações de renderização do navegador

Captura de tela do curso da Udacity

O desempenho é importante para os usuários e, para criar boas experiências do usuário, os desenvolvedores da Web precisam criar sites que reajam rapidamente às interações do usuário e sejam renderizados de maneira suave. O especialista em desempenho Paul Lewis está aqui para ajudar você a eliminar instabilidade e criar apps da Web com desempenho de 60 quadros por segundo. Você sairá deste curso com as ferramentas necessárias para criar o perfil de apps e identificar as causas do desempenho de renderização abaixo do ideal. Você também vai explorar o pipeline de renderização do navegador e descobrir padrões que facilitam a criação de sites rápidos que os usuários vão achar agradáveis de usar.

Este é um curso sem custo financeiro oferecido pela Udacity (em inglês) e você pode fazer a qualquer momento.