How a Browser Works
what happens after i type a url and press enter
this question looks simple
but inside browser full movie is running
browser is not magic
it is system
let us see flow with pictures
high level browser architecture
browser has many parts
each part has one job
think like this
user interface talks to browser engine
browser engine controls everything
networking brings data
rendering engine draws page
js engine runs logic
team work
user interface part
this is what we touch daily
address bar
tabs
buttons
when you type url
this part sends message inside browser
browser engine vs rendering engine
this part confuses many beginners
browser engine is like manager
rendering engine is like painter
browser engine says
go fetch data
go draw page
rendering engine actually draws
networking how browser fetches files
browser needs files from internet
browser sends request
server sends response
html
css
js
images
networking is delivery system
html to dom creation
html comes as text
browser converts it into structure
dom is tree
html is root
elements are branches
text is leaves
easy to manage
css to cssom creation
css also parsed
cssom stores styles
color
size
font
position
browser keeps it separate from dom
dom plus cssom makes render tree
now magic happens
dom says what
cssom says how
render tree knows
what is visible
what is hidden
only visible things go ahead
layout reflow paint display
final steps before screen shows page
layout decides size and position
paint fills colors and text
display shows pixels
this happens many times when page changes
parsing explained with simple example
parsing means breaking into meaning
2 + 3 * 4
system creates tree
multiplication first
then addition
same logic browser uses
full browser flow from url to pixels
complete story in one view
type url
network fetch
html to dom
css to cssom
render tree
layout
paint
display
this is browser life cycle
