The difference between DOM and Virtual DOM

Sakib Ahmed — Fri, 22 Apr 2022 15:39:39 +0000

In this article, we will try to find out what is DOM and its problems. What is Virtual DOM, and explain how it solved the problems of the real DOM.

Intro

The creation of React by Facebook developers introduces a new term, virtual DOM. Virtual DOM plays a major role in drastically improving the performance of applications created using this library. In the following text, we will define both the virtual and the real DOM and explain how the virtual DOM solved the problems of the real DOM.

What is DOM

Just to get things straight - DOM stands for Document Object Model and is an abstraction of a structured text. It takes HTML elements and wraps them in an object with a tree structure — maintaining the parent/child relationships of those nested HTML elements.
The HTML DOM provides an interface (API) to traverse and modify the nodes in a number of ways — such as adding nodes, removing nodes, editing a node’s content, etc. It contains methods like getElementById or removeChild. We usually use JavaScript language to work with the DOM.
Any manipulation of certain elements inside it causes complete re-render. With more and more complex web applications these complete renders of real DOM are very costly, causing applications to have slow performance.

Problem With DOM

DOM manipulation is the heart of the modern, interactive web. But unfortunately, it is also a lot slower than most JavaScript operations.
As mentioned above the HTML DOM is always tree-structured - which is allowed by the structure of the HTML document. This is great because we can traverse trees fairly easily. Unfortunately, easily doesn’t mean quickly here. This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.
Nowadays The DOM trees are huge. it’s common to have a thousand nodes in a single SPA (Single Page Applications - SPAs). Since we are more and more pushed towards dynamic web apps, we need to modify the DOM tree incessantly and a lot. Inefficient updating like repainting the whole page for each change is very very expensive And this is a real performance and development pain.

And this is exactly where the Virtual DOM comes into action.

What is Virtual DOM

The Virtual DOM is a lightweight abstraction of the real DOM. You can think of it as a copy of the DOM, that can be updated without affecting the actual DOM.
It consists of two copies of real DOM represented as tree structures. One copy is an exact replica of real DOM and stays that way while the other copy changes as manipulation with certain elements happen. At that moment the two compare and the change between them is extracted. Extracted change is then implemented inside real DOM without it having to completely re-render. After successful implementation, there are again two exact replicas. When manipulation with a certain element happens again the process is repeated.
It has all the same properties as the real DOM object but doesn’t have the ability to write to the screen like the real DOM. The virtual DOM gains its speed and efficiency from the fact that it’s lightweight. In fact, a new virtual DOM is created after every re-render.

To Keep Real and Virtual DOM in sync a process called Reconciliation is used. Diffing algorithm is a technique of reconciliation that is used by React.

How Does it solve the problem?

When you render an element in virtual DOM, every single virtual DOM object gets updated.
This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly.
Once the virtual DOM has been updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.
By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”
Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. In our example from earlier, React would be smart enough to rebuild your one checked-off list item and leave the rest of your list alone.
This makes a big difference! React can update only the necessary parts of the DOM. React’s reputation for performance comes largely from this innovation.

In summary, here’s what happens when you try to update the DOM in React:

The entire virtual DOM gets updated.
The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
The changed objects, and the changed objects only, get updated on the real DOM.
Changes in the real DOM cause the screen to change.

Conclusion

The creation of Virtual DOM solved real DOM’s low performance and slow re-render. It enabled web applications to be more complex and more interactive for users without having to sacrifice so much performance.

Free JavaScript Coding Classes/Courses – For Beginners [2022 Guide]

Sakib Ahmed — Tue, 22 Feb 2022 21:31:33 +0000

Disclosure: This post Dose Not includes affiliate links in any shape or form.

Everybody needs to learn to code. Coding is the new literacy. If you can't code you'll soon become obsolete, plus coding is easy so you have no excuse. these are all statements that are not true but I've been told that fear-based sales tactics will scare you into unicorn my post.

Today's blog is about a variety of practical Classes/Courses that have helped me learn to code in JavaScript can help you start a great career as a JavaScript developer for Free.

The freeCodeCamp courses are completely free and some of them even include a free certification that you can add to your LinkedIn or résumé.

Here is the complete list of free courses. Once you find a course that interests you, click that link and it will jump you down to a more detailed description of that course.

Free JavaScript Courses

1.Learn JavaScript – Full Course for Beginners
This freeCodeCamp YouTube, course is about conditions, loops, functions, objects, arrays, and ES6.

2.JavaScript Algorithms and Data Structures
This course focus on the basic of JavaScript, ES6, regular expressions, basic data structures, Object-Oriented Programming, and functional programming. (Free Certification🏆)

3.JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour
In this Programming with Mosh course, you will learn about JavaScript basics like objects, arrays, and functions.

4.The Modern JavaScript Tutorial
In this tutorial, you will learn about JavaScript basics, error handling, promises, async/await, and the DOM.

5.LearnJS
In this tutorial, you will learn about JavaScript basics, Object-Oriented Programming, inheritance, and data structures.

6.JavaScript Tutorial
In this tutorial, you will learn JavaScript fundamentals, ES6, BOM, the DOM, and web APIs.

7.JavaScript
In this SoloLearn course, you will learn about conditions, loops, functions, objects, arrays, the DOM, and events.

8.JavaScript Programming
In this freeCodeCamp YouTube course, you will learn about the basics of JavaScript and build a blackjack game and Google Chrome extension.

9.Full-stack JavaScript
This Odin Project course will teach you HTML, CSS, JavaScript, and NodeJS through a series of lessons and projects.

10.TypeScript Course for Beginners 2021 – Learn TypeScript from Scratch!
This course teaches array types, object types, tuples, function types, and callbacks.

11.Backend Development and APIs
In this freeCodeCamp course, you will learn the basics of Node.js, NPM, Express, and MongoDB. (Free Certification🏆)

12.Node.js Tutorial for Beginners: Learn Node in 1 Hour
This Programming with Mosh course teaches different modules like the path module, OS module, file system module, and NPM commands.

13.Node.js and Express.js – Full Course
In this freeCodeCamp YouTube course, you will learn about NPM commands, different modules, async patterns, events, streams, and HTTP basics.

If you have any questions or feedback, then please drop a comment. Thanks

DEV Community: Sakib Ahmed