Performance implications of removing element from the DOM?

Question

I have an animation loop which adds a new element to the DOM and animates it, this can go repeated basically forever. My question is, when each animation cycle has finished, is it better to remove the element from the DOM or to just leave it hidden on the page? I can't reuse the element since the way the loop works, a new animation may begin while the other one is finishing, so there could be multiple elements on the page at a given time. I realize this question is rather elementary, but would appreciate some insight. Thanks.

Answer 1

Performance implications

Hardly any. However, there are memory implications - filling up the DOM with (hidden) elements and never stopping to do so is evil. Of course, at some point this slows down the whole process.

is it better to remove the element from the DOM or to just leave it hidden on the page?

Definitely remove it.

I can't reuse the element since the way the loop works, a new animation may begin while the other one is finishing, so there could be multiple elements on the page at a given time.

You still could reuse them by maintaining an element pool, but that's probably not necessary. Removing old ones and creating new ones is fine.