How Browsers Work: An Easy-to-Follow Guide for Newbies

What a browser actually is

think browser is an hotel and in that variouse foods are present this food are your data/result/websites.

when your go hotel and you request for food , this is same way you go your chrom browser and search for website/info that came from server.

so browser is an place where you type urls and requested for info . whenevenr your request the uri reach to the server and data come for your site ,this data serve as document formate include html,css,js.

components for borwser

1. User Interface

user interface is the top layer of your browser where you saw the things and interact with that such as buttims,nav bars, imgs ,forms, search bar etc .

2. Browser Engine vs Rendering Engine

Browser Engine is the core software that interprete html,css ,js and display it as interactive content.

act bridg between code and ui , transfer request .

render engine is work as rendering ,formating the thing is webbrowser, its show up ui visuals .

responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.

3. Networking

suppose you requested xyz.com , after this brower intially find your site ip address in dns records after get ip of your site its browser request to server for websites file like html css js .

which are then parsed and processed to display the webpage.

Networking is just the browser going out, talking to servers, and bringing back website files.

4 . js enterpreter

every browser has inbuild js interpreter to exceute javascript code in brower, js enterpreter works as converting human readable code into machine code.

How the Browser JavaScript Interpreter Works:
1. lexical analysis : the code is broken down into small pieces called token like vairbles,opertors,sumbols

2.Parsing : the tokens are organised into a tree stucture called as abstarct syntax tree which represent the code and logical structure

3.compilation/execution: Modern engines use Just-In-Time (JIT) compilation to convert the AST into optimized machine code just before execution, which improves performance. The code then runs, interacting with the web page's Document Object Model (DOM) to create dynamic effects.

5 . backend

server present in backend to process the request and sending the data to client ,server may be nodejs ,java server its.

6. disk api

disk api is used to communicate computer harddisk brower not directly access harddisk so its use disk api , it is used to stored files , cookies,sesion ,cach file etc.

HTML parsing and DOM creation

so brower is an machine wich is not understand plain text html so that we have to convert text html into structured html which browser can understand for that we use parser.

parser is an the rule base structure its convert plain text into structured way which brower can understand helps with tokenizers.

after structuing each nodes become an object ,the room element is document ,this objects structure as tree like structre this is known as document object module .

CSS parsing and CSSOM creation

like html parsing browser need to understand css for that browser conver css into internal structured representation to apply on html.

after parsing it becoms css object model

cssom is tree like structer its Stored in browser memory its Used to apply styles to DOM elements.

Layout (reflow), painting, and display

reflow:

reflow is an part of render engine which is use to calculation of position ,geometry how the frmes siazes looking and defing size and positioning.

When Does Reflow Happen?

Reflow occurs when:

• Window is resized

• Font size changes

• DOM elements are added or removed

• CSS properties affecting layout change:

  • width, height

  • margin, padding

  • display

  • position

  • font-size

painting:

painting is just imaging color filling in the pxels here no calculation done as like reflow.

Browser paints:

• Background colors

• Text

• Borders

• Images

• Shadows

• Gradients

disply :

Display combines painted layers, often using GPU acceleration, and displays the final output on the screen. Reflow is the most expensive operation, followed by repaint, while compositing is the most efficient. its final step and displying to screen.

Very basic idea of parsing

parsing is basically breaking something and understanding the structure.

when you use :
2 + 3 × 4

Your brain:

use bodmos rule and solve .

in computer:

its actually parsing with build an express tree to solve it:

step 1:

tokenization : breaking into parts

Step 2: Parsing

Now the computer applies rules.

Multiplication happens before addition

step 3: Evaluation

• 3 × 4 = 12

• 2 + 12 = 14

result = 14

what if there is no parsing

the computer just went left to right and answer will be 20

2 + 3 = 5

5 × 4 = 20