What is the DOM & Virtual-DOM, BOM, CSSOM?

DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM.

So, while HTML is a text, the DOM is an in-memory representation of this text.

Virtual DOM

First of all — the Virtual DOM was not invented by React, but React uses it and provides it for free.

Virtual DOM is a virtual representation of the Document Object Model that is kept as temporary memory storage for all the changes brought to the user interface and is synced with the real DOM by a library such as ReactDOM.

With the real DOM, each change would trigger an update, slowing down the web apps. While in Virtual DOM, it delays that process until it finds the most efficient way to update and render the real DOM — which is also called the reconciliation process or diffing.

Is virtual Dom faster than Dom?

No, virtual DOM is not faster than real DOM. Under the hood virtual DOM also uses real DOM to render the page or content. So there is no way that virtual DOM is faster than real dom.

Why was virtual DOM introduced?

DOM manipulation is an integral part of any web application, but DOM manipulation is quite slow when compared to other operations in JavaScript.
The efficiency of the application gets affected when several DOM manipulations are being done. Most JavaScript frameworks update the entire DOM even when a small part of the DOM changes.

For example, consider a list of items that is being rendered inside the DOM. If one of the items in the list changes, the entire list gets rendered again instead of just rendering the item that was changed/updated. This is called inefficient updating.
To address the problem of inefficient updating, the react team introduced the concept of virtual DOM.

Reconciliation

• Whenever a component’s state or props gets updated, the component gets re-rendered and builds a new virtual DOM.
• Then react runs the diffing algorithm to calculate what changes should be applied to real DOM. This process is known as reconciliation.

Terms to understand

• Rendering: Process of converting virtual dom into dom
• Mounting: Process of injecting rendered dom into target dom
• Diffing and Patching: Process of comparing the virtual dom and actual dom, updating the nodes which are changed

How to React render the UI using V-DOM?

React uses two virtual DOMs to render the user interface. One of them is used to store the current state of the objects and the other to store the previous state of the objects.

“A render can only be triggered when a component state has changed”.

Whenever the virtual DOM gets updated,(it means Dom changes the state) that process is known as Reconciliation.

After this react compares the two virtual DOMs and gets to know which virtual DOM objects were updated.

After knowing which objects were updated, react renders only those objects inside the real DOM instead of rendering the complete real DOM, that process of comparing both virtual Doms and render updated objects is known as Diff algorithm.

This way, with the use of virtual DOM, react solves the problem of inefficient updating and also optimizes the complexity using V-DOM.

Bonus:

Do you know onload event, CSSOM and DOMContentLoaded event

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading and the load event is fired when the DOM, CSSOM, and all other resources are loaded (can be used to detect a fully-loaded page).

CSSOM: The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It allows users to read and modify CSS style dynamically.

Note: DOM and CSSOM are independent data structures.

Browser Object Model (BOM)

The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser.

Some of the examples of BOM objects are: document, location, history, navigator, screen.

Window-Object

The window object represents a window in the browser. An object of a window is created automatically by the browser.

A window is the object of the browser, it is not the object of javascript. The javascript objects are string, array, date, etc.