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

Real DOM VS Virtual DOM

In this article, we will discuss the differences between the real DOM and the virtual DOM in the context of web development. We'll explore how these concepts impact the performance and efficiency of web applications, and how they contribute to the overall user experience. By the end of this article, you'll have a clear understanding of the distinctions between these two approaches to managing and updating user interfaces on the web.

1 year ago By Mitali Gupta
Introducing ECMAScript 6 (ES6): A New Era for JavaScript Development Introducing ECMAScript 6 (ES6): A New Era for JavaScript Development

In this article, we'll explore the important changes and improvements that came with ECMAScript 6 (ES6), and how they've made JavaScript programming better.

1 year ago By Mitali Gupta
EdKool.com Launches: A New Destination for All Things Education & Technology

We're delighted to announce the launch of EdKool.com, a unique platform designed to bridge the gap between education and technology.

2 years ago By Santosh Kshirsagar
Stack all Interview Questions .

In this Article all the problems related to stack is been uploaded for coding interview. Here there are questions which will help building your concept on stack from beginner to advance and you will be able to tackle any stack interview problem very easily.

2 years ago By Aniket Prajapati