Search code examples
reactjsvue.jsvirtual-dom

What does it mean by virtual dom is in-memory?


I get how virtual-dom batches DOM manipulations to enhance performance. However I have seen some posts saying virtual-dom is fast because it is in-memory representation of actual DOM.

I have read this ANSWER. It says:

on the other hand real DOM has to be accessed from page and loaded to memory for any operation.

does this mean that browser's real DOM is not in memory? If browser's DOM is also in-memory, what makes virtual dom's in-memory special?


Solution

  • Virtual DOM is just a javascript object in memory. While DOM is also mainly in memory (no in disk and on the cloud), it's a complex system with many parts connected.

    The difference is that DOM is slow. Manipulating DOM involves many other tasks (https://stackoverflow.com/a/6817110/8810271). Manipulating a virtual DOM without other tasks is no more than a javascript object, which is much faster than element.innerHTML=x.

    But remember you still need to manipulate DOM after diffing virtual DOM, to make changes take effect. And it isn't always faster.