Why do we need to use a vDOM to gain performance? Why aren't efforts being made to make DOM itself fast? Is the DOM really slow enough to justify the extra dependency of a vDOM?
I know very little about the DOM so please take this with a grain of salt. Perhaps someone can correct anything wrong I say:<p>Changing values/adding nodes/removing nodes in a DOM isn't the expensive bit.<p>The expensive part is what happens after something changes in the DOM.<p>When a node is changed it triggers an invalidation of the current screen. The modified DOM means that something different should be on the screen compared to last render.<p>Naively this means that we recalculate the position and size of each node according to rules (CSS and otherwise) of the node, the node's parent and the node's children.<p>Now imagine we have 1 root node with 5 children nodes. Each of those children nodes have 5 nodes and those children have 2 nodes. Each node is display:block<p>Now a script is run. The first leaf node has the height property changed.<p>Now you have to recalculate the size and position of each node in that tree.<p>Okay that's fine but wait, the script continues to run. It's also increasing the height of the second leaf node. Recalculate the height of all the nodes again.<p>It turns out that the script was a for loop and it's increasing the height of all the leaf nodes.<p>So you've just remeasured the DOM 50 times when you could have remeasured once by using a virtual DOM.<p>To reiterate I know nothing about the DOM so I'd appreciate someone else clarifying and correcting my comment.