(A personal Note) DOM and Virtual DOM

What is DOM ? How dom working?

The HTML DOM is a standard object model and programming interface for HTML. It defines:

• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements

HTML Dom Tree is structure of many DOM

An example for manipulating the dom

document.getElementById('some-id').innerValue = 'updated value';

When writing the above code in the console or in the JavaScript file, these things happen:

• The browser parses the HTML to find the node with this id.
• It removes the child element of this specific element.
• Updates the element(DOM) with the ‘updated value’.
• Recalculates the CSS for the parent and child nodes. (reflow)
• Update the layout.
• Finally, traverse the tree and paint it on the screen(browser) display. (repainted)

=> the above example is reflow, it is critical to performance

Reflow and repainted

A repaint occurs when changes are made to an elements skin that changes visibly, but do not affect its layout. Examples of this include outline, visibility, background, or color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.

A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). Examples that cause reflows include: adding or removing content, explicitly or implicitly changing width, height, font-family, font-size and more.

More clearly with a diagram https://gist.github.com/faressoft/36cdd64faae21ed22948b458e6bf04d5

Batching all the dom change https://stackoverflow.com/questions/37039667/executing-multiple-dom-updates-with-javascript-efficiently

=> reflow change directly to the DOM Tree => critical performance => The virtual dom rescue

Why virtual dom is a solution?

Virtual DOM: React uses Virtual DOM exists which is like a lightweight copy of the actual DOM(a virtual representation of the DOM). So for every object that exists in the original DOM, there is an object for that in React Virtual DOM. It is exactly the same, but it does not have the power to directly change the layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen. So each time there is a change in the state of our application, virtual DOM gets updated first instead of the real DOM. You may still wonder, “Aren’t we doing the same thing again and doubling our work? How can this be faster?” Read below to understand how things will be faster using virtual DOM.

How Virtual DOM actually make the things faster: When anything new is added to the application, a virtual DOM is created and it is represented as a tree. Each element in the application is a node in this tree. So, whenever there is a change in state of any element, a new Virtual DOM tree is created. This new Virtual DOM tree is then compared with the previous Virtual DOM tree and make a note of the changes. After this, it finds the best possible ways to make these changes to the real DOM. Now only the updated elements will get rendered on the page again.

How Virtual DOM helps React: In react, everything is treated as a component be it a functional component or class component. A component can contain a state. Each time we change something in our JSX file or let’s put it in simple terms, whenever the state of any component is changed react updates it’s Virtual DOM tree. Though it may sound that it is ineffective but the cost is not much significant as updating the virtual DOM doesn’t take much time. React maintains two Virtual DOM at each time, one contains the updated Virtual DOM and one which is just the pre-update version of this updated Virtual DOM. Now it compares the pre-update version with the updated Virtual DOM and figures out what exactly has changed in the DOM like which components have been changed. This process of comparing the current Virtual DOM tree with the previous one is known as ‘diffing’. Once React finds out what exactly has changed then it updated those objects only, on real DOM. React uses something called as batch updates to update the real DOM. It just mean that the changes to the real DOM are sent in batches instead of sending any update for a single change in the state of a component. We have seen that the re-rendering of the UI is the most expensive part and React manages to do this most efficiently by ensuring that the Real DOM receives batch updates to re-render the UI. This entire proces of transforming changes to the real DOM is called Reconciliation

This significantly improves the performance and is the main reason why React and it’s Virtual DOM is much loved by developers all around.

source: https://www.geeksforgeeks.org/reactjs-virtual-dom/

=> It mean that the reflow with not interact with real DOM, it with interact with the virtual dom firstly. All the part require costly performance in Virtual dom. A updated Virtual dom with batch all update send to real DOM tree. And dom tree just repainted the changed part only in once time

Comments