Limited Period Offer : 20% Discount on online/offline courses, for more details call/whatsapp

Real DOM VS Virtual DOM

1 min read
2 years ago By Mitali Gupta

Real DOM (Document Object Model):

Representation: The real DOM is a tree-like structure that represents the actual structure of the webpage as it is rendered in the browser.

Performance: Directly manipulating the real DOM can be slow and inefficient, especially when dealing with complex and frequent updates.

Updates: When changes occur in the web application, the real DOM updates immediately to reflect these changes. This can cause a performance bottleneck in cases of frequent updates.

Efficiency: Due to its direct interaction with the actual rendering engine, the real DOM can consume more memory and processing power.

Operations: Performing operations on the real DOM can lead to a lot of overhead, such as layout recalculations and repaints.


Virtual DOM:

Representation: The virtual DOM is an abstraction or lightweight copy of the real DOM. It's a JavaScript representation of the UI.

Performance: Manipulating the virtual DOM is faster than manipulating the real DOM because it's a lightweight object and doesn't involve direct interaction with the browser's rendering engine.

Updates: When changes occur in the web application, they are first applied to the virtual DOM. Then, the virtual DOM is compared to the previous version to calculate the minimal changes needed to update the real DOM efficiently. This process is known as "reconciliation."

Efficiency: The virtual DOM allows for more efficient updates by minimizing the number of actual changes needed in the real DOM. It batches and optimizes changes for better performance.

Operations: Working with the virtual DOM reduces the need for frequent layout recalculations and repaints, resulting in better overall performance.

Aug 23, 2023 22:00 Back to Articles

Other Articles

Binary Tree

Binary Tree is a Non-Linear data structure which has atmost 2 child . A Binary tree is represented by a pointer to the topmost node (commonly known as the “root”) of the tree. If the tree is empty, then the value of the root is NULL. Each node of a Binary Tree contains the following parts:

2 years ago By Aniket Prajapati
Creating a Spinner Using Pure HTML and CSS Creating a Spinner Using Pure HTML and CSS

In this article, we will explore how to create a stylish spinner using pure HTML and CSS. The animated circle rotates indefinitely, offering visual feedback for ongoing processes on your web pages.

2 years ago By Mitali Gupta
What is Agile Development ? What is Agile Development ?

Agile development is a software development approach that emphasizes flexibility, collaboration, and continuous delivery. It involves iterative development, continuous feedback, a collaborative approach, adaptability, and continuous improvement.

2 years ago By Mitali Gupta
Top 10 Web Frameworks of 2023 Top 10 Web Frameworks of 2023

As technology evolves and new trends arise, the landscape of web frameworks is continually shifting. This article will present the top 10 web frameworks to consider in 2023.

2 years ago By Mitali Gupta