Executing multiple DOM updates with JavaScript efficiently

Question

I have a HTML/JS website with several hundreds of div elements. A few dozens of these elements should be updated in a rapid fashion (up to 250 times per second) at one time

Answer 1

You'll want to do the updates to the DOM "offline". Depending on your requirements, it may be as using display: None in the CSS of the parent container, doing the updates, then unhiding said container. You can do something like this more manually by removing Nodes from the DOM and reinserting them after manipulation.

If that leads to a perceptible or otherwise unacceptable gap in the display of the elements, then you may want to consider a solution where you're copying the Nodes, manipulating them, and then overwriting the older ones in place. Will probably have to be careful and do a little more research to ensure that doesn't just cause the browser to instantiate a bunch of new elements all the time. Maybe a "pool" of the Nodes