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

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
Best Websites for Building Resumes

In this article, we will explore five top websites that can assist you in crafting a compelling resume to increase your chances of getting shortlisted by companies.

1 year ago By Mitali Gupta
Quill Editor in laravel livewire

using quill editor in livewire code

1 year ago By Santosh Kshirsagar
The Importance of UX Design in Software Development The Importance of UX Design in Software Development

UX design is vital for user engagement, satisfaction, and the success of software applications in competitive markets.

1 year ago By Mitali Gupta