Baseie mudanças de desempenho no Canvas em evidências

Crie uma cena de estresse repetível

Crie um estado de teste com um número conhecido de objetos em movimento, efeitos sobrepostos e rótulos de texto. Capture uma gravação ou semente fixa para que cada execução apresente aproximadamente o mesmo trabalho. Compare uma linha de base de cena vazia com uma cena lotada e, em seguida, inspecione se o tempo é gasto em atualizações de JavaScript, desenho de tela, decodificação de imagem ou trabalho de estilo e layout.

Se o desenho for o maior custo, teste agrupar caminhos semelhantes, reduzir mudanças de estado desnecessárias ou renderizar apenas as regiões que mudaram. Se a lógica de atualização for o gargalo, use o profiler para analisar verificações de colisão e iteração de objetos. O guia de otimização de Canvas da MDN apresenta essas técnicas como opções a avaliar, não como soluções universais que garantem velocidade.

Mude um custo e confira o resultado

Escolha um custo suspeito, como redesenhar repetidamente um fundo estático. Armazene esse fundo em cache em um Canvas fora da tela e compare antes e depois usando a mesma cena. Confira a imagem em tamanhos diferentes e depois de redimensionar: o cache pode ficar incorreto se usar dimensões antigas ou escalar o texto de outra forma.

Registre o dispositivo, o navegador, a cena e a ação usados na comparação. O resultado em uma máquina ajuda a diagnosticar aquela execução, mas não determina o desempenho em todos os navegadores e dispositivos. Teste de novo a interação original: uma otimização que melhora uma cena sintética ainda pode piorar a sensação dos controles em outros pontos.

Perguntas sobre ⁨desempenho de jogo em Canvas⁩