How a Browser Works: A Beginner-Friendly Guide to Browser Internals

Lets try to understand what is a brower. browser is the software which allow us to access and interact with website in the internet .In the browser there is address bar where we type the url of the website .The browser send the request to the web server for the web page resource with the help of http/s protocol.Then the web server send the resources like HTML,CSS ,JAVASCRIPT,Image etc. then the browser interpret the resouces and display the webpage in the user browser.further more we interect and request the resources , the browser keep on requesting to web server and render on the browser. now we have understood about over view about browser.Its Time to deep dive into the component of the browser
Component of the browser:
User Interface
Browser Engine
Rendering Engine
Networking
JavaScript Interpreter
Ui backend

The user Interface is the where when you open the browser you see.In the User Interface you will , the address bar, back.forward button, bookmark menu and tab which we all interract with it.The Browser engine is the core of the browser .it facilates the communication between the other component of the browser.it provide the resource to the Render enginer for rendering the webpage.In the Networking component , it handle all the networking communication.it send http request to the server , receive the http response and make connection between the user and server.when the server send the webpage rsources , first it comes to the browser engine , its gets to rendering engine .The rendering engine contains the html and css parser where it parse the html and css , and make the corresponding dom .after the dom of html and css is made then it goes to the frame constructor ,which help in making the frames after then it goes to the frame/reflow tree, In this it do calculation like shaping or sizing the frame or coloring etc at it do the painting .as the user interact ,it interact with javascript interpreter as well.



