What is a DOM ? :

In a formal sense, a DOM is an application programming interface (API) for documents. DOM defines a logical structure for a document and helps developers to access and manipulate a document. It very closely resembles the document models. For example, consider the following HTML list.

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

The DOM represents the list as follows:

As we can see, a DOM is very much like a tree.

Now let’s understand the concept o Virtual DOM.

Let’s start the answer with why. Every time there is a change in the UI of our application, the DOM updates, which means the whole tree is updated, and then the UI components are rerendered. This rerendering of UI elements every time a small change makes an application slow, and hence, the denser your UI is, the slower our DOM updates will be. And this is where a Virtual DOM comes into the picture. A Virtual DOM is a virtual representation of a Real DOM discussed above. Now when there is a state change in the UI of our application, only the virtual DOM is updated instead of the real DOM. The next thing to ask is how updating virtual DOM improves performance. 

DOM Diffing or Document Object Model Diffing is the concept of comparing the DOMs before and after the modification and ensuring efficient updates. Before understanding DOM Diffing deeply, we should know what DOM is and what is its purpose.