So many JS frameworks utilize a vdom/diffing technique. I know very little about how it actually works, other than the goal of minimizing repaints. It doesn’t feel right. Has there been a discussion regarding a better long term solution?
For example, you could buffer (delay/queue) DOM changes: document.buffer(). All DOM operations are then delayed until they are flushed? Couldn’t the browser do most of this automatically?
I suppose it’s the requirement that when you “addClass()”, then traditionally you’d expect the DOM/layout to reflect the change immediately, on the next line of code. So it is a bit of a paradigm shift.
Behind the scenes, it might be something similar to vdom/diffing. But instead of building it with JavaScript, it would be baked into the system. That seems like a better long term solution.
Alternatively, I’ve wondered if you could use a DOM placeholder:
- Replace a DOM node with a dummy clone (temporary placeholder that lasts a matter of milliseconds)
- Make all operations on the original DOM, that is now in-memory, removed from the document, and does not trigger repaints
- When you’re done, swap them back
In fact, maybe using a placeholder (the clone and swap operations) just slows it down, and you might be able to remove/replace the dom fast enough that the user doesn’t notice? This might be risky if the process slows down too much, and you can see a flicker.
Anyway, by removing the DOM, you can do direct manipulations without worrying about jank.