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

Real DOM VS Virtual DOM

1 min read
1 year 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:

1 year ago By Aniket Prajapati
Web Development as a career !! Web Development as a career !!

Web development offers a fulfilling career designing, developing, and maintaining websites and applications, combining creativity and technical skills in the digital realm.

2 years ago By Mitali Gupta
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.

1 year ago By Mitali Gupta
HashMaps

Hashing is a technique or process of mapping keys, and values into the hash table by using a hash function. It is done for faster access to elements.

1 year ago By Aniket Prajapati