What is a Web Browser?

A web browser is simply an application for accessing WWW(world wide web). When a user requests web browser for a particular website, it does the necessary things and then displays the page.

This blog focuses on what are the necessary things that the browser does from looking the URL to displaying the page.

Some terms:

GPU:
Graphics Processing Unit is good at handling simple tasks but across multiple cores at the same level.

Process and Threads:
Process is simply an application's executing program. Whereas, threads lives inside the process and executes any part of it's process's program.

When we start an application, a process is created which can create threads to help. Operating system gives private memory to the process, which is released when the application is closed. A process can ask to spin-up another process for different task.

Browser Architecture

Web browser is built using process and threads. Different browser have different architecture. Here, I am taking the reference of Chrome browser. Browser contains different process for performing different tasks. Here is the list of some of those:

Process and what they do?

• Browser: Controls address bar, bookmarks, back & forward buttons, network requests and file access.

• Renderer: Controls everything inside tab.

• Plugin: Controls plugins.

• GPU: Handles GPU task in isolation. It is separated into different process because GPUs handles request from multiple apps and draw them in the same surface.

Except these there are more process. Like extension. But these are the major ones.

Some fun facts

• Chrome have multipurpose architecture, which means that each tab has it's own renderer process. This makes multipurpose architecture more secure.
• Since process have their own V'8 engine. Chrome puts a limit on memory. If one opens more tab then multiple tab runs on the same process.
• If the machine is powerful then browser process will split each service into different process. This is also used in android.

Navigation

Navigation refers to, when a user requests a page and the browser prepares to display that page. This starts with browser process. When we type the url all the way to document loading phase. Here is a flowchart to explain every single things:

Link for the image

Renderer Process

After navigation the document loading phase begins, and the html, css and js starts converting into a page. This process is responsible for displaying the page.

• Controls everything inside tab.
• Main purpose to turn HTML, CSS and JS into web page.

Parsing

1. When the render process receives a commit message for a navigation and starts to receive HTML data, the main thread begins to parse the text string and turns into DOM.

2. Main thread loads external resources while building DOM but to speed up "preload scanner" peeks at tokens generated by HTML(img, link) parse and sends request to network threads.

3. If HTML parse finds script tag then, first JS is loaded, parsed and executed before continuing to HTML because JS can change the DOM.

4. Now style is loaded.

5. Layout is decided after this.

6. Decide what to display first (e.g z-index). For this main thread creates paint records. Paint records is a note of painting process like background first then the text.

7. Turning the information into pixels on the screen is called rasterizing. Old Method: If the user scrolls the page, then move the restered frame and fill the missing part. New Method: Composting, a technique to separate parts of page and rasterizing and composite as a page in separate thread.

8. In order to decide layer tree, main thread sees layout tree.

9. The compositor thread rasterize each layer and sends each tile off to raster threads (stores tile in GPU). Frame is then submitted to browser process. Then to GPU to display.

Now we can see the page. And this is how a website is loaded. There are many other things to browser like the security and each browser have different architecture so every browser handle things differently.

I really recommend to read this BLOG.