How a Browser Works: A Beginner-Friendly Guide to Browser Internals
Let’s checkout the topics that we are going to cover in this blog.
What a browser actually is (beyond “it opens websites”)
Main parts of a browser (high-level overview)
User Interface: address bar, tabs, buttons
Browser Engine vs Rendering Engine (simple distinction)
Networking: how a browser fetches HTML, CSS, JS
HTML parsing and DOM creation
CSS parsing and CSSOM creation
How DOM and CSSOM come together
Layout (reflow), painting, and display
Very basic idea of parsing (using a simple math example)
What is a Browser and how it fetch the HTML,CSS and JS?
Browser is a powerful element of machine which helps in displaying many visuals that are coming or going into the machine/computer. Browser consists of various components within them to execute a particular task let’s see how a webpage is displayed over a browser after hitting the URL or we can say how HTML, CSS and JS is fetching on clicking the URL from browser.
What is parsing? Basic idea of parsing!
You can see the flow diagram, there are some terms to explain here such as What is Parser? Parser is like the BODMAS of browser, which mean there are some rules to calculate the result. For example 1 + 2 × 3 = ?
Main parts of a browser
Browser have various componets within it to execute the tasks. User Interface, Browser Engine(Gecko,Chrominum), Rendering Engine, Networking, JS Interpreter, UI Backend, disk API ( local storage ).
User Interface: it acts as a bridge between humans and machines to communicates within the web,applications and devices.ie, Tabs, buttons, address bar etc.
Browser Engine: Its core software components that interprets web pages code (HTML,CSS,JS) and draws the visual that you see on your screen acting as the bridge between the browser's user interface and the web content.
Rendering Engine: Transforming code into the interactive visuals you see on your screen.
Networking: For DNS lookups that we already seen in previous blogs.
JS Interpreter: Used to read and execute the Javascript code, usually its like a software embedded in your browser.
UI Backend: It is an archetecture approach where the server dictated the structure, content and behaviour of the user interface,rather than the client side code.
Disk API: A programmin interface used to manage,read, write and manipulate file storage, either local storage or cloud storage.
What is DOM and CSSOM?
the DOM represents the structure and content of a page, the CSSOM represents its styling.
HTML parsing and DOM?
HTML parsing is the process by which a web browser converts HTML markup into a tree-like structure in memory called the Document Object Model (DOM).
CSS parsing and CSSOM?
CSS parsing is the browser's process of converting raw CSS code into a structured, usable format called the CSS Object Model (CSSOM).
How DOM and CSSOM come together?
DOM Construction: The browser parses the HTML markup and builds the DOM tree, which represents the structure and content of the page.
CSSOM Construction: The browser processes the CSS (from external, embedded, or inline sources) and builds the CSSOM tree, which is a map of all style rules, their hierarchy, and specificity.
Render Tree Creation: The browser's rendering engine combines the DOM and CSSOM trees. Starting from the root of the DOM, it traverses all visible nodes and applies the corresponding computed styles from the CSSOM. Visibility and style Calculations.
Layout and Paint: Once the render tree is complete, the browser performs the "layout" (or reflow) step, which calculates the exact position and size of each element in the viewport. Finally, the "paint" step converts this information into pixels on the screen.
Frame constructor, Layout (reflow), painting, and display
These are the components of the browser, which after creation of DOM acts. Starting with Frame constructor which is similar to frames or skeleton building,then comes reflow or layout which is just the mathematics or computation of the segments, then painting which is basically how the visuals looks like on screen and finaly the display to output everything on a screen of your device.
We prefer not to do reflow because it laids to computations so most of the time do colour chagne on click not the bold or sizing change on click. So, painting is less computational than the reflow because in reflow the tree formation occurs again and again which makes a lot of mathematical computations.
Web Parsing
It the automatic process to analyse the raw HTML, XML data retrieved from website to extract, structure and clean data or specific information.
There are two types of web-parsing Conventional and Unconventional parsing.
Conventional parsing: They follow some rules to execute the task like CSS, JS.
Unconventional parsing: It follow no rules ie HTML.
HTML is the only error friendly language on web that’s why its also an Unconventional parsing or solo parser on internet. Once we tried to use the strick parser but people complaint about the problem. so, again its come to unconventional parsing.
Conclusion
Understing browser is a new experience and we should learn the behind the scene how it actually fetch the code from the Server into your device screen.
