“If you don’t understand the details of your business, you are going to fail “— Jeff Bezos
Today, it is difficult to imagine a world without internet.
The web browser is at the heart of how we experience the internet. Every day, millions visit websites via browsers. Five major browsers — Chrome, Firefox, Internet Explorer, Safari and Opera — account 95% of web traffic.
A major role of a web browser is to accept a web URL via an address bar, fetch resources, and display them on the screen.
Browsers functionality can be classified into four major sections and these include:
Each category defines a set of duties that browser has to execute and comprises of subsystems.
A major subsystem called network layer plays a vital role in fetching data from subsequent web servers via the internet.
The network layer
Accepts URLs from the browser user interface and is responsible for making network calls to fetch resources via HTTP/FTP protocols.
It feeds data to the process subsystem called rendering engine as it becomes available and is usually done in byte size to improve performance.
If the requested website implements a cache, a copy of the data is made in App Cache or Service Workers for next time. Caches are great for their quick response times and saving network requests for regular visits.
The browser initially looks for any cache availability on local memory for requested URLs. Otherwise, the network layer creates an HTTP packet with a domain name for requesting a web resource over the internet.
The network layer plays a major role in the user experience. It can be a bottleneck in web performance, since browsers wait for remote data/content to arrive. Various techniques can be used to reduce this impact on the user’s experience.
This step involves accepting data from the network layer and feed the display subsystems. Render engine, JS engine and UI backend subsystems are part of the process.
The rendering engineWebKit Main Flow
The rendering engine subsystem processes data from the network layer and displays web content on the screen.
By default, it can process HTML, XML and Image files. However, it can be extended to accommodate various data types via extensions.
Many render engines are available, and are usually written in C++. Examples include:
- Chrome and Opera both use Blink
- Firefox uses Gecko
- Internet Explorer uses Trident
- Edge uses EdgeHTML
- Safari uses WebKit
With rendering engines, web resources are parsed. For example, a HTML parser converts a HTML template into an object called the DOM tree.
Stylesheets are parsed to generate style rules for both external and inline style elements.
A render tree is an object that combines both the parsed HTML and CSS. It is generated with visual instructions and attributes to render elements on the user’s screen.
Once the render tree is constructed, it undergoes layout and painting processes, and displays the output on the screen.
The layout process includes calculating dimensions and exact coordinates where each element should appear on the viewport.
The painting process includes filing the layout with style attributes like color, background and other CSS properties.
The rendering engine processes data in chunks and displays the content as soon as possible. It will not wait until the entire document content undergoes the layout and painting processes.
One of the most popular engines is the Google V8 engine. It is written in C++. Here are some examples that different browsers use:
- Chrome uses Chrome V8
- Firefox uses SpiderMonkey
- Edge uses Chakra
- Internet Explorer uses Chakra (JsScript)
These engines include two components: the memory heap and the call stack.
The memory heap is where memory is allocated for variables, functions and other JS elements.
The call stack is simply a queue of stack frames or sequential steps executed by the browser.
These engines have several threads internally to perform various tasks. Examples of such tasks include:
- Fetching, compiling and executing code
- A profiling thread to analyze functions and their time consumption
- Optimizing the execution process
- Garbage collectors
Google’s V8 engine uses a mark-and-sweep method to perform garbage collection in an incremental way. This makes use of the browser’s idle time and improves performance.
As of version 5.9 (early 2017), Ignition and Turbofan are the latest pipelines in the V8 engine.
As the name itself suggests, this relates presenting data to the users. User Interface and Browser Engine are responsible for data presentation and handling user navigation.
The visual appearance of the browser normally includes an address bar to accept web URLs, and navigation buttons such as a back, forward, refresh, and a home and bookmarks bar.
Along with these inputs and action buttons, we have the viewport (the main part of the screen) to display content fetched from websites.
The User Interface (UI) communicates with other subsystems within the browser to display content and act accordingly.
No specific standards are imposed on how the interface should look and feel. Instead, browser vendors have refined the UI as browsers have evolved over the years.
The browser engine
The browser engine is an embeddable subsystem that provides a high-level interface to the rendering engine.
It loads a given URL and supports primitive browsing actions such as navigating forward, back and reload.
The browser engine also allows for querying and manipulating the rendering engine settings.
Web browsers have a small amount of storage capacity in order perform few actions, cache data and store data over browser for perform kicks and other browser functionality.
Data persistence is achieved through various browser APIs. Some of them include:
- Local storage
- Session Storage
- Service Workers
Local storage and Session storage are key-value pairs that can store any JS objects and functions in the browser.
These Session and Local web storage limits are 5MB per object, and 50MB per system.
Cookies are collections of key-pair data stored on the browser memory. They are sent back and forth between client and server.
These are expensive and are the least performant of the data persistence methods. However, they are very useful when privacy and security come into the picture.
WebSQL, IndexedDB, and FileSystem have the abilities to store data on browser depending on size, performance, and necessity.
App Cache was introduced in HTML5. It stores website static content and serves UI content during network downtime.
Service Workers are Google’s new way of caching website data for offline usage. It has significant features compared to App Cache. You can read more about Service Workers here.
Recap and references
All right, let’s do a quick recap now. All major web browsers comprise subsystems, along with other submodules to help with the process.
You can read more at the resources linked below:
- How Browsers Work: Behind the scenes of modern web browsers — HTML5 Rocks
- Browser Data Persistence
- Browser Architecture —by Alan Grosskurth and Michael W. Godfrey
Thank you for reading 👍