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?
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
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
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.
The job of virtual DOM in React is it will create virtual DOM tree, and in the end of every event loop, it will compare the current V-DOM tree with the previous V-DOM tree, and then get the patch and manipulate the real DOM. If in one event loop, user modify the same component many times, React will calculate the final result and manipulate the real DOM, it is called 'Batching'
So actually, not every case will take the advantage from V-DOM of react. In case of your example, React may use innerHTML to manipulate real DOM. and if you change the one of element frequently, React will act batching.
You can refer below article http://calendar.perfplanet.com/2013/diff/
Virtual DOM is a lightweight copy of a real DOM, which by means of the declarative API and the diff algorithm compares those elements that need to be modified with the help of observables, and then redraws only them. And, despite the fact that virtual DOM is created from scratch every time, it takes less than 50 milliseconds, which is not noticeable to the human visual perception. This technique speeds up the performance of the application at times because it does not involve an unnecessary number of real DOM’s “heavier” elements that retain their states.
That's one of the reasons that ReactJs is fast
innerHTMLoperation (obviously the DOM is still slow but the number of operations can be optimized).O(model)andO(view)and due to pagination, tabbing, etc, there's usually fewer view pieces than model pieces to sort through when it's time to actually update the view.