6

Tenho vários polígonos que alteram seus pontos infinitamente (enquanto estiver na página), essa interação é feita por um plugin js e em meu código tenho estas chamadas:

var config = {
    targets: '',
    points: [],
    easing: 'easeOutQuad',
    duration: 10000,
    loop: true,
    direction: 'alternate'
}

// Tenho 11 chamadas como esta
config.targets = '.class';
config.points = [{value: 'pontos'}, {value: 'pontos'}, {value: 'pontos'}]
anime(config);

Então são 11 elementos sendo modificados 3 vezes, terei problemas com esta prática? Se sim, como posso melhorar?

O plugin que estou utilizando: https://animejs.com/

1
  • 3
    Consumo de recurso, falha de memória, travamento do browser. Se for no mobile ainda é pior.... O DevTools do Chrome tem ferramentas para vc medir isso, use-as, vai te ajudar a ter uma ideia
    – hugocsl
    Commented 19/06/2019 às 19:44

1 Resposta 1

7

Olha usei a DevTools do Chrome para verificar o consumo de recurso. Mas tenha em mente que eu testei direto na página do plugin, ali ele está praticamente rodando de forma insolada, mas pense em um ambiente real com mais coisas na página e outros softwares consumindo recursos da maquina.

inserir a descrição da imagem aqui

Veja que vc tem várias escaladas de consumo de memória sempre que a animação inicia, logo que a animação para o consumo desce. Tentei demostrar com a seta do mouse, fique atento a ela e a curva de consumo de memória

inserir a descrição da imagem aqui

Agora veja o que está acontecendo por "debaixo dos panos" veja a quantidade de cálculos que o browser está fazendo. Certamente não é muito sustentável para o sistema...

inserir a descrição da imagem aqui

Os efeitos disso como comentado são alto consumo de recursos do sistema, falha de memória, travamento do browser. Se for em dispositivos mobile ainda é pior, pois eles tem menos capacidade de processamento....

inserir a descrição da imagem aqui

Essa animação do link que vc passo nem é das piores, por ela trabalha na faze composite da renderização da pagina, isso significa que ela anima o elemento depois que ele já foi renderizado, por a animação usa transform, e não margim. Para entende melhor olhe essas duas animações, veja como a animação de cima da umas "agarradas" pois usa margin-left, já a de baixo usa transform, veja como é mais fluida.

.box {
	width: 50px;
	height: 50px;
	background-color: red;
	animation: nome 3s linear infinite;
}

@keyframes nome {
	50% {
		margin-left: 500px;
	}
}

.box.x {
	animation: nomex 3s linear infinite;
}

@keyframes nomex {
	50% {
		transform: translateX(500px) translateZ(0);
	}
}
<p>com margim (vai apresentar pequenos travamentos)</p>
<div class="box"></div>
<p>com transform: translate (não tem travamentos é mais fluida)</p>
<div class="box x"></div>

Outro ponto é que o translate ativa o uso da GPU na renderização da animação, o que da um alivio tirando o processamento da CPU que normalmente está ocupado com outras coisas.

DICA: O SVG tb possui esse comportamento mais fluido nas animações, e eu recomendo usa-lo no lugar dessa animação que vc citou, principalmente por não consumir tanto recurso, pois a animação acontece toda no composite, além disso, necessita de menos nodes no DOM o que acaba pesando muito no caso da sua animação.

Recomendo que leia tb sobre o will-change que pode te ajudar a otimizar animações web. Propriedade will-change do CSS: quando utilizar?

5
  • Sim, eu havia reparado nos cálculos nos elementos em si e de fato no celular eh bem pior, fica travando bastante. Eu já fiz uma função para ativar os efeitos apenas quando o usuário estiver a tela, agora me resta otimizar melhor esse código, talvez diminuir o value e a quantidade de elementos. Obrigada! Commented 20/06/2019 às 12:04
  • @KamilePimenta essa animação nem eh das piores Pq ela usa transform, o que normalmente deixa o processamento pra GPU e não pra o CPU, assim que de vou fazer uma edição ai pra incluir mais umas observações e te falo. Mas já te adianto que colocar um translateZ e will-change pode ser que melhore um pouco a performance, e para 10 ou 15 elementos o browser deve dar conta tranquilo
    – hugocsl
    Commented 20/06/2019 às 23:26
  • Certo, obrigada Hugo! Aqui está o link do real projeto caso queira verificar: tmw.com.br . Os efeitos estão na home do site mesmo, se tiver alguma sugestão de melhoria pode me informar. :) Commented 21/06/2019 às 11:30
  • 1
    @KamilePimenta cara editei a resposta com mais umas infos, acho que pode te interessar, apesar de não haver muito mais que vc possa fazer a não ser tentar implantar o will-change, ou migrar para uma animação em SVG... Mas reduzir o número de nodes animados no DOM já vai melhorar muito!
    – hugocsl
    Commented 24/06/2019 às 13:20
  • 1
    Siiim, muito top! Agradeço :) Commented 26/06/2019 às 16:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .