In many of my examples I post here in hashnode, I use cloneNode. In some cases I'll just do innerHTML (make sure the source is clean). What I usually do is:
- if you can getaway with setting properties of an element, or classes etc rather than changing the DOM tree, then do that.
- If above does not work, then you will need to create/clone an element change it and append.
- For the above, if you have too many nodes to change at ones, putting them inside a DocumentFragment can help with the performance but it seems that with modern evergreen browsers the performance benefit is gone.
- Most importantly you can wrap inside your element generator function another function that 'throttles' it.
To benchmark, I give you a project of mine from 4 years ago where I wrote a SVG 3d renderer from scratch. Click on the indoril icon on lower left. Every time you drag, elements are added and removed and ordered within the tree:
i-pv.org/1_45/NFKB1
you'll have about 250 nodes being appended/removed running at 60fps on chrome on a medium laptop with thousands of other elements drawn already.
So you can see that this won't be a bottle neck for a 'small' project.
What can be the bottleneck is the unnecessary repaint/reflows that could have been batched together to reduce burden.