normal DOM

If one of these list items updates, then the DOM re-renders the entire list.

What makes DOM manipulation slow?

The DOM is represented as a tree data structure. Because of that, the changes and updates to the DOM are fast. But after the change, the updated element and it’s children have to be re-rendered to update the application UI. The re-rendering or re-painting of the UI is what makes it slow. Therefore, the more UI components you have, the more expensive the DOM updates could be, since they would need to be re-rendered for every DOM update.

Example

                    document.getElementById('elementId').innerHTML = "New Value"
                    

Following thing happens:

1. The browser has to parse the HTML.
2. It removes the child element of elementId.
3. Updates the DOM with the “New Value”.
4. Re-calculate the CSS for the parent and child.
5. Update the layout i.e. each elements exact coordinates on the screen.
6. Finally traverse the render tree and paint it on the browser display.
7. Recalculating the CSS and changing layouts uses complex algorithms and they affect the performance.
8. Thus updating a real DOM does not involve just updating the DOM but, it involves a lot of other processes.
9. Also, each of the above steps runs for each update of the real DOM i.e. if we update the real DOM 10 times each of the above step will repeat 10 times. This is why updating Real DOM is slow.

Virtual DOM

How Virtual DOM solves above problem? Virtual DOM is an in-memory representation of real DOM. It is a lightweight JavaScript object which is a copy of Real DOM.

virtual dom is lightweight copy of Real DOM.

When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called “diffing”.

when new elements are added to the UI, a vitual DOM is created. If the state of any these elements are changed, a new virtual DOM tree is again created. This tree is then compared or diffed with the previous virtual DOM tree

If the template or model file is changed, it's necessary to update the view. This process of syncing the template with the data is called "Change Detection”.Every Frontend Language uses this process, for example, react uses virtual DOM.

You can see Angular components and it Changes Detector (CD) for every component which was created during your application bootstrap process in this image. Those change detectors compare the current value with the previouss one. If ChangeDetector detects the value is changed, it will set Property is Changed==true.

Angular uses ChangeDetectionStrategy.Defaultas a default change detection strategy. Every time an event is fired like user event, XHR, timer, etc. The default strategy will check every component in the component tree from top to bottom. It will check every component without making any assumption on component's dependencies which may create some issue that's why it's called dirty checking. It can badly influence your application's performance if you have a large application that contains many components.

OnPush()

As we saw in default Change Detection strategy, if you have a large application default strategy will check all component, we will affect your performance.so to overcome that problem you can use OnPush()ChangeDetection strategy.

react uses virtual DOM

Working in React

1.Whenever a DOM is rendered into browser React generate copy of that object as a Virtual DOM.

2. When user interacts and want to change the DOM, React generate another copy of updated virtual DOM.

3. React Compare virtual DOM vs updated Virtual DOM, if there are changes then only react will render the Browser DOM, otherwise not.

4. Now if some changes between them, react is intelligent to find which node has changed using the diff algorithm. React tells browser DOM, this node subtree need to change everything else remains as it is.

Updating virtual DOM in ReactJS is faster because ReactJS uses

1. Efficient diff algorithm
2. Batched update operations
3. Efficient update of subtree only
4. Uses observable instead of dirty checking to detect the change

-ReactJS uses observable’s to find the modified components. Whenever setState() method is called on any component, ReactJS makes that component dirty and re-renders it.

-Whenever setState() method is called, ReactJS creates the whole Virtual DOM from scratch. Creating a whole tree is very fast so it does not affect the performance. At any given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM.

-ReactJS using diff algorithm compares both the Virtual DOM to find the minimum number of steps to update the Real DOM.

-Finding the minimum number of modifications between two trees have complexity in the order of O(n^3). But react uses a heuristic approach with some assumptions which makes the problems to have complexity in the order of O(n).

ReactJS uses the following steps to find the difference in both the Virtual DOM’s

1. Re-render all the children if parent state has changed

If the state of a component has changed, then ReactJS re-renders all the child components even if child components are not modified. To prevent the unwanted re-render of the child components we can use shouldComponentUpdate() component life cycle method. This will further help in boosting performance.

2.Breadth First Search

ReactJS traverse the tree using BFS. Consider the below tree. States of element B and H have changed. So when using BFS ReactJS reached element B it will by default re-render the element H. This is the reason to use BFS for tree traversal.