In this article, We will try to learn about browsers. How do they work? As they're really important for our connectivity with the internet.
Also understanding them helps us improve our knowledge about how things work on the internet, and how websites are being displayed on our screen.
Also as a developer, while building a web application it is very important to write the code in such a way that it can run smoothly and effortlessly in any browser. Understanding the internals of browsers helps us make better decisions during development so that the performance and functionality of the application are at optimum levels.
What is a browser?
A browser is a software program that allows you to access and view content on the internet. It's like a window to the online world. You use a browser to visit websites, watch videos, read articles, and do many other things on the internet.
When you visit any URL or search for something, what happens behind the scenes is that a request gets sent to the server for the webpage and when the response comes it gets displayed on the browser.
In short, you can say that the browser is just an interface between you and the server, which lets you talk to the server. Also processes the response from the server in such a way that you can understand and interact with ease
Understanding browser architecture
Let us see the components involved in the browser and their roles in the browser
User Interface (UI)
This is what you see as the browser window. It includes elements like the address bar, back and forward buttons, share logo, and other controls. The UI allows you to interact easily with the browser.
The browser engine is responsible for managing and coordinating the interactions between the UI and the rendering engine. It receives user input from the UI and instructs the rendering engine how to display content.
The networking stack handles the communication between the browser and the internet. It manages tasks like making HTTP requests, handling cookies, and managing caching. It also deals with protocols like HTTP, HTTPS, FTP, etc.
The UI backend is responsible for drawing the browser's user interface, including the address bar, buttons, and other UI elements. It interacts with the operating system's graphics API to display the UI.
How browsers work actually
Let us see the steps involved in browsers working
You, as the user, type a web address (URL) or perform a search in the browser's address bar.
Domain Name System (DNS) Resolution
The browser checks its cache to see if it already knows the IP address associated with the domain name. If not, it sends a request to a DNS server to translate the human-readable domain name into an IP address.
Once the browser knows the IP address of the server, it sends an HTTP (or HTTPS for secure connections) request to that server. This request includes information like the type of request (GET, POST, etc.) and additional headers.
Upon receiving the files, the browser's rendering engine starts parsing the HTML. It converts the raw HTML code into a Document Object Model (DOM), which is a tree-like structure representing the elements on the page and their relationships.
CSS Parsing and Rendering
While parsing the HTML, the browser also encounters CSS stylesheets. These are parsed and combined with the DOM to create a Render Tree. This tree contains information about how each element should be displayed
The browser uses the information from the Render Tree to create a "layout" that determines the exact position and size of each element on the page. It then paints the pixels on the screen based on this layout, creating what you see as the webpage.
The painted pixels are displayed on the screen, and you see the webpage.
In this article, we tried learning about the browser's working We learned about what a browser is and how it works. It's various components and behind the scenes about what happens when a request goes out from the browser.
I tried giving a gist about the browser's functionality but there is still more to browsers. If you feel so, you can learn about them more in depth but the things explained in this article are enough for you to get started.