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. The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details.
Let's think about one situation— If you have something messed up in a room in your home and you need to clean it, what will be your first step? Will you be cleaning your room which is messed up or the whole house? The answer is definitely that you will be cleaning only the room which requires the cleaning. That's what the virtual DOM does.
Virtual DOM (Document Object Model) is a strategically to update DOM without redrawing all the nodes in a single page application. Finding a node in tree structure is easy but DOM tree for an Single Page Application app can be drastically huge. Finding and updating a node/nodes in case of an event is not time efficient. Virtual DOM solve this problem by creating a high label abstraction of actual dom. The Virtual DOM is a high level lightweight in-memory tree representation of actual DOM.
Basically, the Virtual DOM implements:
- A tree structure representing the DOM elements your application creates.
- A
diff algorithm designed to identify changes between DOM representations.
- A way to replicate said changes in the actual DOM - but only if necessary.
When elements are rendered, updates are made to the virtual DOM first.
After updates are made to the virtual DOM, it is then compared to the actual DOM through a process known as "diffing". This process allows the rendering engine to more accurately determine what's actually changed and minimizes the number of elements that are redrawn in the UI.
Once the "diffing" process completes, the actual DOM makes the necessary updates and re-renders the elements that have changed.
Source/Ref :
- all images source Google
- Document Object Model
- React virtual DOM
Thanks!
(Answer originally posted as an answer on Quora.com )
(Answer originally posted as an answer on Quora.com )
Post a Comment