An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-II

Highlights of Part-I

• Browsers parse our HTML code into a DOM tree
• This happens because browsers understand only DOM
• DOM basically has 4 nodes — Document, Element, Attribute and Text
• DOM can be modified through Javascript and that’s why JS is called a DOM manipulator
• JS has DOM manipulators(methods and properties) and they are collectively called DOM queries

When browsers display the page, its structure is decided by the DOM tree.DOM tree is parsed by browser engine. If you have CSS attached to an HTML file, it is then converted into a CSSOM tree.

Parsing means code to tree conversion

Before displaying to the screen, both the DOM tree(from HTML) and the CSSOM tree(from CSS) gets mixed up in one place called Rendering Tree. This process is called Rendering.

Rendering means place where DOM and CSSOM meet

So Render tree connects DOM and CSSOM before the display on the screen or webpage. We know that HTML is for the structure(head, title, body etc) of a page and CSS is for the decoration(colour, position, background etc) of a page. Both structure and decorations need to be calculated/arranged before the screen. This part is done by the Layout phase. Then it gets displayed on the screen/webpage.

Layout means mixing of structure and position

How does Javascript work in the browser?

We have an HTML file as a source. There will be CSS linked to it for styling and Javascript for DOM manipulation.

Javascript was invented to make a webpage dynamic. We can comfortably say that JS bridges an important gap between web-1.0(static) and web-2.0(interactive). As a DOM manipulator, it needs to be communicated with DOM. To get access to DOM, JS must enable us to communicate with DOM. This enabling or communication process is done by API(Application Programming Interface)

API means communication between two software/applications

When Javascript is introduced as a programming language, it needed standards like syntax/rules so that it works the same across all browsers. This is done by ECMA.

ECMA tells how JS should be implemented by all browsers(Chrome, Firefox etc) so that it runs exactly the same across all browsers. That’s why Javascript and ECMA scripts are used interchangeably.

Note: ECMA doesn’t tell how JS should run inside the browsers. That’s why we have engines like V8 for chrome,SpiderMonkey for Firefox and Chakra for Internet explorer

Running means how it gets converted into machine code to implement in CPU

If I explain how the browser’s engine run the javascript, this article would become a rabbit hole. That is beyond the scope of this article.

1. HTML and CSS are converted to DOM and CSSOM respectively. This process is called Parsing.
2. DOM and CSSOM are mixed at the Render tree. This process is called Rendering
3. Before being displayed on the screen, structure and position are mixed at the Layout phase
4. Javascript gives dynamicity to the webpage via API to the DOM
5. Javascript is standardised by ECMA.JS is implemented by all browsers exactly the same but running JS inside browsers is up to the browser to decide.

Originally published at https://www.pansofarjun.com on March 2, 2022.