Reduzir o overdraw

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Um app pode renderizar o mesmo pixel mais de uma vez em um único frame, um evento chamado overdraw. Geralmente, o overdraw é desnecessário e pode ser eliminado. Ele se manifesta como um problema de performance que desperdiça tempo de GPU para renderizar pixels que não contribuem com o que o usuário vê na tela.

Este documento explica o overdraw: o que é, como diagnosticar, além de ações que podem ser tomadas para eliminar ou atenuar o problema.

Sobre o overdraw

O overdraw acontece quando o sistema renderiza um pixel várias vezes em um único frame. Por exemplo, se tivermos vários cards de IU empilhados, cada um vai esconder uma parte do que estiver abaixo dele.

No entanto, o sistema ainda precisa renderizar as partes escondidas dos cards na pilha. Isso ocorre porque os cards empilhados são renderizados de acordo com o algoritmo do pintor (link em inglês), ou seja, na ordem inversa. Essa sequência de renderização permite que o sistema aplique uma mistura alfa adequada aos objetos translúcidos, por exemplo, sombras.

Encontrar problemas de overdraw

A plataforma oferece as ferramentas abaixo para ajudar a determinar se o overdraw está afetando a performance do app.

Ferramenta de Depuração de overdraw da GPU

A ferramenta de Depuração de overdraw da GPU usa codificação por cores para mostrar o número de vezes que o app renderiza cada pixel na tela. Quanto maior essa contagem, maior a possibilidade do overdraw afetar a performance do seu app.

Para saber mais, consulte como visualizar o overdraw da GPU.

Ferramenta de Criação de perfil de renderização de GPU

A ferramenta de Criação de perfil de renderização de GPU mostra em um histograma com rolagem o tempo que cada fase do pipeline de renderização leva para mostrar um único frame. A parte Processo de cada barra, indicada em laranja, mostra quando o sistema está trocando buffers. Essa métrica fornece pistas importantes sobre o overdraw.

Em GPUs de performance mais fracas, a taxa de preenchimento disponível, isto é, a velocidade com que a GPU pode preencher o buffer do frame, pode ser muito baixa. À medida que o número de pixels necessários para mostrar um frame aumenta, a GPU pode demorar mais para processar novos comandos e solicitar que o resto do sistema aguarde até conseguir concluir a atividade. A barra Processo mostra que essa métrica acontece quando a GPU fica sobrecarregada tentando renderizar pixels o mais rápido possível. Outros problemas diferentes de números brutos de pixels também podem causar o aumento dessa métrica. Por exemplo, se a ferramenta de Depuração de overdraw da GPU mostrar um overdraw muito grande, e a barra de Processo aumentar, é provável que haja um problema de overdraw.

Para saber mais, consulte como determinar a velocidade de renderização da GPU.

Corrigir o overdraw

Existem várias estratégias para reduzir ou eliminar o overdraw:

  • Remover planos de fundo desnecessários em layouts
  • Nivelar a hierarquia de exibição
  • Reduzir a transparência

Esta seção fornece informações sobre cada uma dessas abordagens.

Remover planos de fundo desnecessários em layouts

Por padrão, um layout não tem um plano de fundo, o que significa que nada é renderizado diretamente. No entanto, quando os layouts têm planos de fundo, eles podem contribuir para o overdraw.

Remover planos de fundos desnecessários é uma maneira rápida de melhorar a performance de renderização. Um plano de fundo desnecessário pode nunca ficar visível, já que ele vai ser completamente coberto por todo o resto que o app estiver renderizando sobre a visualização. Por exemplo, o sistema pode cobrir completamente um plano de fundo pai quando renderizar visualizações filhas em cima dele.

Para descobrir o motivo do overdraw, verifique a hierarquia com a ferramenta Layout Inspector. Enquanto faz isso, procure planos de fundo que podem ser eliminados por não ficarem visíveis para usuários. Casos em que muitos contêineres compartilham uma mesma cor de plano de fundo oferecem outra oportunidade de eliminar planos de fundo desnecessários. É possível definir o plano de fundo da janela como a cor de fundo principal do seu app e deixar todos os contêineres acima dele sem valores definidos.

Nivelar a hierarquia de exibição

Layouts modernos facilitam o empilhamento e a criação de camadas em exibições para produzir um design bonito. No entanto, isso pode prejudicar a performance, resultando em overdraw, principalmente em cenários em que cada objeto de exibição empilhado é opaco. O resultado é a necessidade de renderizar pixels visíveis e invisíveis na tela.

Se encontrar esse tipo de problema, você pode melhorar a performance otimizando a hierarquia de exibição para reduzir o número de objetos de IU sobrepostos. Para saber mais sobre como fazer isso, consulte Otimizar hierarquias de exibição.

Reduzir a transparência

A renderização de pixels transparentes na tela, conhecida como "renderização alfa", é um dos principais responsáveis pelo overdraw. Diferente do overdraw padrão, em que o sistema esconde completamente os pixels já renderizados mostrando pixels opacos por cima deles, os objetos transparentes precisam que os pixels existentes sejam renderizados antes para que a equação de mistura correta possa ocorrer. Efeitos visuais, como animações transparentes, esmaecimentos e sombras projetadas, envolvem algum tipo de transparência e podem contribuir significativamente para a existência do overdraw. Nessas situações, é possível melhorar o overdraw reduzindo o número de objetos transparentes renderizados. Por exemplo, é possível mostrar texto cinza ao exibir texto preto em uma TextView com um valor alfa translúcido definido. Mas é possível conseguir o mesmo efeito com uma performance muito melhor, simplesmente renderizando o texto na cor cinza.

Para saber mais sobre os custos de performance impostos pela transparência em todo o pipeline de exibição, assista ao vídeo Custos ocultos de transparência.