What is the impact on the browser when there is infinite and direct interaction in HTML?

Question

I have several polygons that change their points infinitely (while on the page), this interaction is done by a js plugin and in my code I have these calls:

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);

So there are 11 elements being modified 3 times, I will have problems with this practice? If yes, how can I improve?

The plugin I’m using: https://animejs.com/

Answer 1

Look I used Chrome Devtools to check resource consumption. But keep in mind that I tested right on the page of the plugin, there it is practically running insolently, but think of a real environment with more things on the page and other software consuming machine resources.

See that you have several scales of memory consumption every time the animation starts, as soon as the animation for consumption goes down. I tried to demonstrate with the mouse arrow, stay tuned to it and the memory consumption curve

Now see what is happening "underneath the scenes" see how many calculations the browser is doing. Certainly not very sustainable for the system...

The effects of this as commented are high consumption of system resources, memory failure, browser crash. If it is on mobile devices it is even worse because they have less processing capacity....

This animation of the link you pass is not even the worst, why she works in the do composite of the page rendering, it means that it animates the element after it has already been rendered, because the animation uses transform, and not margim. To better understand look at these two animations, see how the animation from the top of the "grabbing" because uses margin-left, the one below uses transform, see how it’s more fluid.

.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>

Another point is that the translate active the use of GPU in the rendering of the animation, which relieves the processing of the CPU who is usually busy with other things.

TIP: The SVG tb has this more fluid behavior in the animations, and I recommend using it in place of this animation that you mentioned, mainly for not consuming so much resource, because the animation happens all in composite, in addition, it needs less nodes in the DOM which ends up weighing a lot in the case of your animation.

I recommend that you read also about the will-change that can help you optimize web animations. CSS will-change property: when to use?