Virtual DOM

Real DOM:

It’s an API for interacting with documents such as HTML and XML. It’s a method of representing structured documents via objects. The best way to visualize the DOM is as a tree of nested objects.

Virtual DOM:

Virtual DOM is the virtual presentation of the real DOM. DOM stands for “Document Object Model”. It represents the UI of an app. The DOM is represented as an upside-down tree data-structure. For it’s structure, frequent changes and edits to the DOM is quite fast. Virtual DOM is updated each time when the application changes. A virtual DOM is created each time new elements in user interface are added. Each elements of these elements are a node on the tree of DOM. A new virtual DOM tree is made when any changes occur within the elements as well. The previous virtual DOM tree then compares itself to the main tree.

Problems Regarding Real DOM:

Dom manipulation is like the heart of interactive web apps. But it has some problems. Such as :

1. Insufficient updating.

2. Not optimized for creating dynamic UI.

3. Difficult to manage when changing large scale applications.

4. Although the DOM is not technically slow, what is slow is the process of laying out elements and painting them for users to view.

Advantages of Virtual DOM:

It’s a lightweight copy of the DOM that is built on top of the standard dom. It’s idea is to utilize the DOM as little and as efficient as possible. When saving, we should compare with real DOM, find what changed and only re-render those parts. It is a fast and efficient diffing algorithm that finds the minimum number of operations required to update the real DOM. It is event driven and responsive to state changes.

How it works:

1. Entire Virtual DOM gets updated when renders.
2. Virtual DOM gets compared to previous version.
3. Figures out which objects change through diffing.
4. The changed objects get updated to on the DOM.

Building A DOM:

1. Virtual DOM is any kind of presentation of a real DOM.
2. When we change something in our virtual DOM, we get a virtual tree. The algorithm should compare the old one with the new one and make only necessary small changes to the real DOM.

React Render:

1. Render() updates and renders the UI.
2. Render() is the required lifecycle method in React.
3. Render() is the entry point for when the tree of React elements are created.
4. Render() returns a different tree of React elements when a prop or a state within the component is updated.
5. Within the component if you utilize setState() then React detects the change in state and re-renders the component.
6. React here calculates the smartest way to efficiently update the UI to match the recent changes.
7. Finally, React updates the virtual DOM and then updates only the objects that have been changed in the real DOM.

Virtual DOM and Frameworks:

It is more common to work with the virtual DOM using framework, rather than interfacing with it. Frameworks such as React ,uses the virtual DOM concept to make more performant updates. Because React use the virtual DOM concept, even though we are re-rendering the entire template only the parts that actually change are updated. If we look at the developers tool when the change happens, it can be see that the specific elements and the specific parts of the elements that change.

Intensivity:

The virtual DOM adds a sheet of scripting to the optimizations the browser carries out to make the DOM manipulations transparent to the software developer. Compared to all other methods of updating the DOM this method of incorporating an additional sheet of abstractions makes reactjs much more intensive.

Memory Usage:

The virtual DOM makes the optimize use of the memory compared to other systems because it doesn’t hold observables in the memory. For the virtual DOM each change in the model can be the reason of a full refresh of the virtual user interface. This is very different from the systems used by other libraries or frameworks that based upon the state of the document, updates them when necessary.