How a Browser Works

Everyone knows that we use a browser to open websites. But is that it? How is it capable enough to open a website in milliseconds within the blink of an eye?

I have deployed my website on vercel and it could be that their servers are located in another part of the world. How does the browser bring that data and just puff!! The website appears in front of me. The code is translated into a website so easily.

What is happening in the background? Let’s try to understand.

1. First, it brought the website.

2. Understood it.

3. Made it appear on the tab.

4. help us interact with it. (that’s a topic for another article)

Technically,

Let’s see what’s in front when talking about browsers.

When we type the url in the browser, the user interface takes care of that further handled by the browser engine and which initiates working at the networking level. Once the code is brought, the render engine handles everything for the HTML, CSS, and their display on the website, with the process of figuring out the layout and paint and if there is JS in the code, the JS engine takes care of that, and any storage is dealt within storage on the browser with the help of the disk api’s.

Terms that can be confusing here are

Browser Engine vs Render Engine

Browser Engine is the lead of the other engines and works with ui to help the browser function, such as managing tabs and all other tasks in the browser.
eg: Blink for Chrome and WebKit for Safari and Chrome on Apple Devices

Render Engine is the main worker here that understands the raw code and creates the displayable content from it for the screen pixel by pixel.
eg: Chromium for chrome and gecko for firefox.

The task of the render engine seems more complex than it looks. So how does he do that?

1. HTML Parser: The HTML parser(unconventional) turns the HTML syntax into the Document Object Model (DOM) tree.

2. CSS Parser: It creates the CSS object model for the whole HTML.

Once the parsing is done, the DOM and CSSOM are combined to create the Render Tree in the Content Sink for the visualisation on the screen.

How is the render understood by the browser? The engine creates the layout first of the screen, placing elements on the screen using a process called reflow.

And then the painting of the elements is done with colours and details, like adding makeup to the elements on the screen.

Everything is picturized on the screen layer by layer for the display.

That’s how the browser works from a higher level. Everything is an article in itself.

You truly understand a browser when you make one. ~Hitesh Sir