Blog

Starting from diffing algo


Introduction
Are you aware of how the diffing algorithm works for react? Do you know how does the browser get to know which part of the DOM has been changed?

In this article I will offer you guys a step by step analysis of what exactly is happening between the browser that the Js library called react.

<b>What is a DOM? </b>

I think we are all aware what is a DOM — full form of it is Document Object Model. — so is that the HTML ? No it is different. It is just a document which represent the hierarchy of the tags.

How do we construct the DOM. Following are the steps of DOM construction

HTML → parser → Content Sink → DOM

What is a html
Hyper text markup language it comprises of tags , hierarchies

Parser
Parses the HTML for content
Content Sink
Pours it in a content sink

DOM :
We use the the Dom simply to parse through the tags and update them.

Lets have an example at at hand.

Now lets attach script

document.getElementById(“n”).value = “My Name”

We have the following screen

So we have the following DOM tree.

In the above example we have one level under the body tag input , label and p tags are all in the same level. We are parsing the DOM tree and updating the value as “My Name” for the input field.This is the conventional way of getting things done in js.

It is a very simple example as we know. In real time development we encounter much more complex scenarios where DOM is updated and traversed much more proactively and thus the tree gets bifurcated into several levels and sub levels.

We use two ways of addressing such views in js programming 1) Imperative approach 2) Declarative approach. For react we use the latter. Imperative approach we have just discussed above.

Declarative approach:
Declarative approach is just an abstraction added on the imperative layer. For imperative we get into the details of the thing i.e parsing the correct node and manipulating the exact node. In declarative we simple tell the change that need to be done. For react we use the declarative approach. Lets see how we do that.


We are not going to find the node to update we only going maintain a state tree and manipulate a state tree the rest will be handled by react (how to parse the dom and which node to update).

So if this is how it works why do we need to know the exact dynamics behind the DOM update since it is total abstracted now? The answer is very straight forward, we need to program better and understand the internal of the react library so that we get to know in which scenario should we should use react over other libraries and vice versa.

<b>Virtual DOM</b>
Virtual DOM is nothing but a copy of the Actual DOM. Sound pretty cool. Why do we actually need it? Well are parsing the Actual DOM and updating it has some drawbacks lets discuss that.
Actual DOM updates are really slow. The moment we update the child tag. The entire DOM tree gets re-rendered i.e the entire thing repainted and updated. Can you imagine the everytime we write a new update the layout is being recalculated css applied and then the update is applied.

That is where we have the VDOM stepping in as another level of abstraction
VDOM helps separate the implementation of project from the browser specific interaction which helps us in many ways such as 1) code organization 2) Making a good design pattern 3) Help us to build a component based architecture.

But is using Virtual DOM going to make the application faster? The answer is NO. Surprising right? It does not help us reduce the rendering time let me give two bench marking report taken as reference from https://www.accelebrate.com/

Actual dom update time.

VDOM update time.

So why is it more time consuming? Answer is simple react library does a higher no. of diffing and comparison before updating into the actual dom. While in the previous approach it is just updating the particular node and there is also no in memory representation of dom stored in the browser.

The reason for using VDOM is very simple thus. It helps us calculate and understand and store our layout better and also to helps us to do real time update much more easily.

So once we are done with obvious. Lets see how the VDOM works and how exactly is the diffing algorithm attached to the VDOM.

In the next section we are going cover how the VDOM works. With a real time example.






FREE Consultation

for First 100 Entrepreneurs