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
JS has DOM manipulators(methods and properties) and they are collectively called DOM queries
How do Browsers work under the hood?
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
API means communication between two software/applications
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
HTML and CSS are converted to DOM and CSSOM respectively. This process is called Parsing.
DOM and CSSOM are mixed at the Render tree.This process is called Rendering
Before being displayed on the screen, structure and position are mixed at the Layout phase