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

Mastering the Fundamentals: Basic HTML Tags for Web Development Mastering the Fundamentals: Basic HTML Tags for Web Development

In this article, we'll explore the Basic HTML elements that form the foundation of every web page.

1 year ago By Mitali Gupta
10 common JavaScript interview questions that you might encounter !!!

In this article, we will discuss 10 JS questions that are commonly asked in interviews. These questions cover a range of JavaScript topics and are commonly asked in interviews to assess a candidate's understanding of the language. Make sure to practice and understand these concepts to perform well in JavaScript interviews.

1 year ago By Mitali Gupta
Level Order Traversal in Binary Tree

In a Binary Tree the level order traversal is used to traverse all the elements of binary tree by starting from root to traversing all nodes of one level before moving to other level.

1 year ago By Aniket Prajapati
How to connect aws RDS instance using mysql workbench

Learn to connect RDS instance(mysql/mariadb) using mysql workbech.

1 year ago By Santosh Kshirsagar