Beginner's Guide to How Browsers Function: Exploring Browser Internals

First of all let’s Understand about browser and then move towards the internals of the browser.

What is Browser

Browser is a rendering platform that talks to the server, that renders the documents and download files , images and also able to understand those files and what not , it is like a whole OS which works in the world of networking.

Example of browsers → Chrome, Microsoft Edge, Brave, FireFox, Safari etc.

High level Overview of browser

1. User Interface (UI) : Everything that you see and interacts with except the webpage itself, like groups , collections , bookmarks and themes . Each browser can have differenct user Interface and fatures.

2. Browser Engine : The browser engine is responsible for the content that is fetched from the server and user interactions. it keeps track of all the actions that is being performed by the user like which button is clicked, which url is asked to parse, and how the content will be displayed on the browser.

3. Rendering Engine : it is responsible for the rendering of the web content , in most of the browsers both the browsing engine and the rendering engine work togetner to provide the better results to the user/client .

   Common rendering engines → Blink(chrome, edge, brave) , webkit (safari) , Gecko(Firefox)

4. Networking Layer : This layer handles the communication part with the server , Like when user click on any url or searched for any url on the browser this network layer iniitate an HTTP request to the webserver to loas the requested website, it is also manages to fetch the content from HTML, CSS files or even images as well.

5. JavaScript Engine : browsers have inbuilt JavaScript engine which help them to understand and interpret JavaScript codes, these engines help to convert the javaScript codes into computer-understandable language.

   Common javaScript Engine → V8(chrome), chakra (Edge), spider Monkey(Firefox), JavaScript Core Webkit (Safari).

6. Data Storage → One part of the browser goes into stroring various types of data which includes user preferences like theme mode , browsing history, password and other personal informations.

7. UI Backend → this is responsible for providing the dynamic and interactive behaviour on the web page and enhance overall functionality and performance of the browser.

This is the high-level architecture of web browser which works together to display us a whole properly working website.

Browser Engine Vs Rendering Engine (high level) :

The Browser engine: marshals actions between the UI and the rendering engine.

The rendering engine: responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.

HTML Parser & DOM

• HTML parser is used to parse the HTML content which is done by the rendering engine of the browser.

• DOM → stands for Document Object model, basically we can imagine collections of our HTML tags as a tree, because after parsing is done by the rendering engines we get Nodes and with the help of these Node , we are able to generate DOM tre

  

CSS Parser & CSSOM Tree

• During the parsing of HTML , rendering engine notices the Link tag which is fo CSS file and get the CSS file after that it also parses the CSS with CSS parser

• CSSOM → stands for CSS Object Model, it is a set of APIs that allowing manipulation of CSS from javaScript, it is similar to DOM, but for the CSS rather than HTML. It allows users to read and modify CSS style dynamically.

How DOM and CSSOM come together

(DOM)Document object model and CSSOM (CSS Object Model) come together to form the rendering tree, which is used by the browser to display the web page content to the screen of the user.

How this is done in following steps :

• DOM Construction → browser parse the HTML and constructs the DOM tree.

• CSSOM Construction → after the construction of the DOM tree , browser processes the CSS and build CSSOM tree.

• Render Tree Formation → the browser then combines the independent DOM ans CSSOM tree into a single render tree

• Layout (Reflow) → once the rendering tree is completed , the browser starts the layout process , this steps calculates the exact position and geometric size of each elements,

  here the conversion of the relative measurements into absolute pixels happens.

• Paint → Finally , the browser paints the individual nodes to the screen using the layout information to render the pixels and display the visual content to the user

Understanding Parsing Using Simple Maths Example

Parsing in browser is a process to convert the raw text into tree like structure that is understandable for browser , and by using this tree browser can perform rendering.

Example : 5 + 7 * 9 + 7

firstly tokenization(breaking into pieces) takes place :

• 5 → Number

• + → Operator

• 7 → Number

• * → Operator

• 9 → Number

• + → Operator

• 7 → Number

tree formation : this is how tree will looks like

Hope you enjoyed reading.