Esta página explica o que é overdraw, como diagnosticá-lo e como eliminar ou atenuar o problema.
O overdraw ocorre quando um app renderiza o mesmo pixel mais de uma vez no mesmo frame. Geralmente, o overdraw é desnecessário, e a melhor opção é eliminá-lo. O overdraw se torna um problema de desempenho quando desperdiça tempo da GPU para renderizar pixels que não contribuem com o que aparece para o usuário na tela.
Sobre o overdraw
O overdraw acontece quando o sistema renderiza um pixel várias vezes em um único frame. Por exemplo, se você tem vários cards de interface 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 a mistura Alfa adequada a objetos translúcidos, como 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 for essa contagem, maior será a probabilidade de o overdraw afetar o desempenho do app.
Para saber mais, consulte Visualizar o overdraw da GPU.
Ferramenta de Criação de perfil de renderização de GPU
A ferramenta Criação de perfil de renderização de GPU mostra o tempo que cada fase do pipeline de renderização leva para apresentar um único frame como um histograma de rolagem. 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 menor desempenho, 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 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 Processo aumentar, é provável que haja um problema de overdraw.
Para saber mais, consulte Velocidade da criação do perfil de renderização de GPU.
Corrigir o overdraw
Você pode fazer o seguinte para reduzir ou eliminar um overdraw:
- Remover segundos planos desnecessários nos layouts.
- Nivelar a hierarquia de visualização.
- Reduzir a transparência.
Esta seção fornece informações sobre cada uma dessas abordagens.
Remover segundos planos desnecessários em layouts
Por padrão, um layout não tem um segundo plano, o que significa que nada é renderizado diretamente. No entanto, quando os layouts têm segundos planos, eles podem contribuir para o overdraw.
É possível melhorar o desempenho da renderização removendo segundos planos desnecessários. Um segundo plano desnecessário pode não estar visível por estar completamente coberto por tudo o que o app estiver desenhando sobre ele. Por exemplo, o sistema pode cobrir completamente um segundo plano pai quando desenha visualizações filhas em cima dele.
Para descobrir o motivo do overdraw, verifique a hierarquia com a ferramenta Layout Inspector. Você pode procurar segundos planos que não sejam visíveis para o usuário e eliminá-los. É possível eliminar segundos planos desnecessários quando há muitos contêineres que compartilham uma cor de segundo plano comum. É possível definir o segundo plano da janela como a cor de segundo plano principal do seu app e deixar todos os contêineres acima dela sem valores de segundo plano definidos.
Nivelar a hierarquia de visualização
Layouts modernos ajudam você a empilhar visualizações para produzir um design bonito. No entanto, isso pode prejudicar o desempenho, 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 você encontrar esse problema, melhore o desempenho otimizando sua hierarquia de visualização para reduzir o número de objetos de interface sobrepostos. Para mais informações sobre como fazer isso, consulte Hierarquias de desempenho e visualizaçã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 já 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
um pouco 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 desenhando texto preto em uma
TextView com um valor alfa translúcido
definido. No entanto, você pode conseguir o mesmo efeito com melhor desempenho,
desenhando o texto em 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.