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

You are reading this article on a browser right now, either you pasted this linked in the URL bar or you clicked it somewhere this page opened in your browser. Do you ever think that how browser converts a link or URL (Uniform Resource Locator) into a functioning responsive web-page?

let’s understand with a simple story.

URL to Web page

First you need a general idea about the different components of the browser and how they work together.

User Interface:: First comes the UI or the User interface, this UI includes your search bar, bookmark icon maybe , settings menu etc. you basically get the idea.

Browser Engine:: Then comes Browser engine if you have used arrow buttons next to your URL bar you know you can move between pages that you visited one after another back and forth, for example if you clicked on a link from a google search you can use arrows (usually on top left) to go back forth between the pages this is part of browsing, also you can see your browsing history, customize rules and security and other browsing related things all of these are handled by the Browsing engine.

Rendering Engine:: Next comes Rendering Engine, a server does not send a button or a paragraph or a rendered image or the page you see.. the server returns raw HTML, CSS, those HTML CSS files are parsed, then the Parsed content are kept in Content Sink. You can understand parsing as a making meaning of an statement. Like who is the speaker, what is the subject and what is being told about the subject. Same with the HTML and CSS content they are parsed to form a usable representation that can be turned into a web page.

Then the parsed data in the Content Sink is used to form Document Object Model and CSS Object Model. These are nothing but a Top to bottom internal structure representation of how the web page will look like when it is finally rendered on the screen (Inside the Browser). This Object models are then used to construct frame by frame rendering of the web page.

JavaScript Engine:: Some websites or web apps also include JavaScript, this JavaScript parsing is handled by JS engine. One of the popular example of a JS engine is V8 engine. This parsed JS is then binded with the DOM via the Rendering engine because that owns the DOM construction.

UI engine:: User engine is what controls the Browsers interface, it uses underlying hardware render the browser itself in the screen and catch user inputs, when the the web page needs some input it goes through the browser and those inputs are captured by the UI engine. Changes in the browser UI like opening and closing tabs, opening new windows or settings menu etc are handled by UI engine. UI engine interacts with the Rendering Engine to send user inputs to the page and other stuff.

Networking:: This component handles the networking related things like sending and accepting HTTP requests or fetching something from an URL, like actually loading image from a live URL. This part of the browser is actually responsible to fetch the HTML, CSS, JavaScript files and other assets from the server to your browser.

Disk API:: Next comes Disk API, this API enables browser to talk to the actual storage device via the Operating System and store and access all the necessary files and information including downloads and uploads. All the Local storage and other API and components like JS engine, Networking all use Disk API to talk to the actual storage hardware via OS.

Browser Engine vs Rendering Engine

If you have understood the part you already know Browser Engine only related to handling the browsing experience for you and the Rendering Engine handles converting raw HTML, CSS, JavaScript into a working functional and responsive web page that you can interact with.
Both are different components with different concerns not to be confused with each other.

Conclusion

So hopefully you understand that browser is not a one singe piece of huge system that does it all, it is a combination of multiple smaller sub-systems that work in co-ordination and sync to prove users a seamless and smooth experience of surfing the internet.

I hope this was simple enough for you to internalize. Thank you for reading.