How virtual DOM increases speed for ReactJS?

Question

I read that ReactJS is very fast compared to other frameworks because if uses virtual dom.

What I am not able to understand is ultimately all framework has to push dom objects in browser. How virtualDom helps gaining speed?

Lets say if I want to add 10K node list, shouldn't required DOM operation time be similar for ReactJS and other frameworks?

Answer 1

Browser engine takes more memory and layout changes for every incremental update or changes applying on the DOM. Because it involves more geometrical and mathematical calculation , which is computed on every layout changes on Browser.

However computation on browser takes less memory and it doesn't reflect anything on the DOM. This approach is made used by VirtualDOM .

So lets a take DOM , each DOM has its own properties DOM properties, these properties are simulated (using JS) .

Virtual DOM preserves state lets say its has inital state of the DOM and all propeties

So whenever there is a change Virtual DOM doesnt reflect in DOM directly instead it will do Comparison operation or Difference Operation , which will only returns properties or attributes which are changed from previous state

So it will just update only the changed property in DOM. rather than repainting the whole DOM for a minor change.

This is very efficient in web apps were ferquent updates happens , where changing a minor portion of DOM saves more memory or geometric calculation by the browser engine rather than whole section of DOM.

ex: <DIV style="color:red; background-color:white;">Hello world <span>from Foo</span></DIV>

When i change text to Hello Mars. rather than deleting and creating a new DOM.

Virtual DOM will only change the text of DIV , which doesnt affect the child <span> and other properties of DOM

See also

• How browser works how does browser paints DOM
• Reactive programming in dept of reactive programming.

Answer 2

First you have to keep in mind that DOM operations (repaints, reflows) are a lot more expensive than Javascript operations.

For example (contrived), updating a

• live DOM element might cost 3 seconds
• virtual DOM element might take 1 second

Now let's say i have a DOM

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

And lets say you want to update it to

<ul>
    <li>First Item</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Without virtual dom it would repaint all 6 elements on the screen which would take 3x6=18 seconds

Using a virtual dom we can paint it in memory and it would cost us 6 seconds. After we've painted, we can compare what has changed, in our case 1 element - we can paint this element in 3 seconds so we've done this operation in 9 seconds (which is faster than without the virtual dom).

Of course, you can imagine that not all cases will benefit from the virtual dom but in most cases using the virtual dom is a significant improvement.

The key assumption is that live DOM repaints/reflows are a lot more expensive than a virtual DOM.