Beginner Friendly guide to Browser Workings
Even non-programmers have used web browsers at some point in their life, but rarely have we thought what a web browser actually is at a deeper level. In this blog we would be discussing about the internals and the architecture of browsers and how different parts of it carry out specific tasks in a beginner friendly approach.
What is a Web Browser?
A Web browser is an application that acts as an interface between the user and the server to load and compute the results from the server in form of html web page along with css style and JS logic, and paints the final output on the screen of the user.
After typing a URL & pressing enter
A browser by definition could be called as a simple application to open the websites using URL, but it is more than that, It’s more like a factory + interpreter + painter that works together to turn text files into a visual, interactive page.
The moment you type a URL https://example.com the browser starts with the DNS lookup process. It looks for the IP in cache and if found contacts the server on that IP, otherwise uses recursive DNS lookups for DNS resolver and DNS server to get the IP.
After finding the IP, it contacts with the server and decides what information needs to be displayed on screen, through a series of actions and steps that would be discussed in proper details further in the block.
Main parts of a browser (High Level Overview)
The browser is not a single entity, but a collection of smaller components working in harmony. It comprises:
User Interface
UI Backend
Browser Engine
Rendering Engine
Networking
JavaScript Engine
Data Persistence (cookies, localStorage, etc.)
We would be discussing what role each component of the browser plays and where do they fit in puzzle.
User Interface (UI)
The User Interface as the name suggests is for the user, an interface that could be operated by the user to perform actions without worrying about the background processes that take place.
It’s sole purpose is to handle user interactions and almost all web browsers consists of some common sections like:
Address bar – Where you enter a URL or search query; it tells the browser what resource to load.
Tabs – Let you open and switch between multiple webpages within the same browser window.
Back / Forward buttons – Navigate through the browsing history of the current tab.
Refresh – Reloads the current webpage to fetch the latest version from the server.
Bookmarks – Save webpage links so you can quickly visit them later.
UI Backend
UI Backend handles drawing and managing browser UI components using the underlying operating system’s native UI capabilities.
The UI Backend is responsible for:
Drawing basic UI widgets like buttons, dropdowns, scrollbars
Using the operating system’s UI primitives
Making the browser look native on Windows, macOS, Linux, etc.
It could be interpreted as the browser’s connection to the operating system’s UI system.
Browser Engine
The browser acts as a bridge between the UI and rendering engine. It takes instruction from UI and tells the rendering engine what to load and when.
Think of browser engine as the manager which
Handles navigation, reload, history
Connects UI with rendering
Rendering Engine
It won’t be wrong to call the rendering engine as the artist because that’s what it brings to the table. The rendering engine turns code into pixels. It understands HTML & CSS and builds the website structure to draw pixels on screen.
The Rendering Engine is often confused with the Browser Engine, however both have different set of functionalities. Browser is similar to the manager and Rendering Engine is one of the actual workers (painter) in the browser components organisation.
Inside the Rendering Engine, the major steps that take place are:
Parsing HTML: This process creates the
DOM.Parsing CSS: This process creates the
CSSOM.Render Tree Formation: DOM + CSSOM combined together forms the Render tree.
Layout: The step in which the maths i.e. calculations take place for the positions, widths, height e.t.c of different elements in the render tree.
Paint: Once the calculations are done, it is time for converting the code into actual pixels on the screen.
Rendering Engine does not execute the JS logic itself.
Example: Blink (Chrome, Edge), Webkit (Safari), Gecko (Firefox).
Networking
The Networking components is one of the major components in the web browser as it handles the networking communication. This component is the one which acts up immediately when you press enter after typing in the URL.
The Networking component
Does DNS lookup
Sends HTTP request
Receives HTML, CSS, JS, images
It receives raw text files, not a webpage.
JavaScript Engine
The JS Engine is the component responsible for executing the brain of the webpage i.e. JS.
The JS Engine is responsible for
Parsing JS
Compiling JS
Executing JS
Managing memory
If the JS changes DOM, or modifies some styles or listens to some user events then it notifies the rendering engine to relayout or repaint if needed.
Examples: V8 (Chrom, Edge), JavaScriptCore (Safari), SpiderMonkey (Firefox).
Storage/Persistance
Data Persistence is core part of browser. It consists of data storage such as cookies and Local Storage, Session Storage e.t.c.
This component is responsible for storing data on the user’s machine so it doesn’t disappear when the user:
Refreshes the page
Closes and reopens the browser
Revisits a site later
HTML Parsing (DOM creation)
Earlier when we were going through the browser components, we went through one of the steps where we parsed HTML. That step is one of the crucial working of the browsers.
HTML stands for Hyper Text Markup Language. The browser needs to understand the structure of the HTML. So it breaks the HTML into smaller meaningful parts (nodes).
<body>
<div>
<p></p>
</div>
<div>
<img>
<p></p>
</div>
</body>
Browser turns this into a tree structure called the DOM (Document Object Model). DOM is a tree like structure which has parent child relationships and represents the page structure.
The DOM tree will contain all the tags as nodes.
CSS Parsing (CSSOM creation)
p {
color: red;
}
Just like the browser created DOM, it breaks the CSS into a tree like structure as well to form the CSSOM (CSS Object Model). The CSSOM tree will contain all CSS rules that are applied to different HTML elements.
Rendering DOM + CSSOM
Once the DOM (what exists) and CSSOM (how what exists should look like) are created, it is time for the creation of the Render tree. The render tree contains:
Only visible elements
With final styles applied
Layout (Reflow)
Once the rendering tree is complete, the browser now asks where each element should be placed and what is the height, width and position of the element. This step is where the maths takes place and is called as Layout.
Whenever you resize screen the layout is recalculated and this is called as Reflow
Painting
Once everything is in picture, it is now time for the final step which includes:
Paint colors, text, borders, images
Layers are combined
Pixels are sent to the screen
Woah ! you just completed all the steps to see your webpage on the screen now.
What not to do as a Beginner?
As a beginner who has always used web browsers to merely open websites, all of this could feel overwhelming at the start. But the point of understanding the browser architecture is not to memorise the steps but to stop making the browser look like a black box.
Understanding the overall flow of the creation of web-page is a good things which would later on help to identify different bottlenecks and help in UI optimizations. We don’t need to understand how things are working, but focus more on how the flow of different things in the browser is.
