How a Browser Works: A Beginner-Friendly Guide to Browser Internals
Learning in public
UI : Anything we see but can’t manipulate that like adderss-bar , setting. UI works with UI Backend(designed to develop basic widgets).
Browser Engine: Works as a midator between UI and Rendering engine. It do work like refresh etc.
Rendering Engine : Used to parse HTML, CSS and JS . And display the page .
Networking : Load requested page from internet
JavaScript Interpreter : Interprets JavaScript
Data Persistance: Local Storage, Index DB, File System etc.
Basic Rendering Engine Flow
Parsing
Parsing: Translating a document into a structure that code can use.
Grammer :
Vocabulary : 1, +, 2, *, 3
Syntax Rules : how vocabulary interacts
Why html does not use conventional parser ?
HTML is not context free grammer (HTML immediatly recover from the error on the way of parser)
Like in this example : Both will work
<body> <div> <p> Hello </p> </div> </body><body> <div> <p> Hello </body>The Syntax Rules defined in HTML Document Type Defination(DTD) by W3C
Render tree
Render tree generated while DOM tree is constructed
Visualize elements in the order which they are going to be displayed
Elements in the render tree are called renderer or render dobjects
Render object is a rectangle
Layout
Layout is also called re-flow in mozila browser
Calculates position and size
Most of the time possible to compute geometry in one pass
Recursive process begins at the root object(<html>)
Dirt bit System - a system that makes sure that browsers don’t need to do the full layout on every interaction(only re-layout is done on the changed part of the DOM).
Global and incremental layout Global :
affects all renders(font size)
screen resize
Gecko Reflow Visualization:
Paint
Render tree is being traversed and the paint() method is used to display content on the page.
Global(the whole page is repainted) and Incremental painting(only changed part is repainted):
reduce the effort of painting the whole thing
dirty bit system(incremental painting)
Painting Order:
Background color
Background image
Border
Children
Outline
How DOM is created from HTML
Load The File
Convert to Raw bytes(this is how data is saved in disk)
Convert into Character information(based on UTF)
Then Converted into Token(Tokenization) —> h1, p, html, body
Converting into literal object:
{ tag: 'h1', title: 'heading', data/value: 'youtube' } {p object} {body object}Convertion of object into structure is called Modal
Relation is enstablished
Coverted into NodeList
Now We have DOM
How CSSOM is created from CSS
Raw Byte
Converted Into Character
Tokenization
Create Object out of it
Convertion of object into structure is called Modal
Relation is enstablished
Now we have CSSOM
Extra Notes:
DOM And CSSOM is runs parallelly and independent of each other
JS get more priority than DOM while rendering
What if the CSSOM not yet ready and we hit the JS tag ?
--> JS execution will be halted until CSSOM is ready
CSS is Render Blocking
JS is parser blocking
References:
