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.
Browsers only understand HTML, CSS and JAVASCRIPT. Behind the scenes, any library or framework may be used by the developer but when it reaches the browser, it processes it to HTML, CSS, and javascript using its engine and renders the webpage.
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.
Browser Engine:
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.
Rendering Engine:
This component takes the HTML, CSS, and JavaScript code from the web server and converts it into a visual representation for you to see on your screen. The rendering engine is the core component for displaying web content.
Networking Stack:
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.
JavaScript Interpreter/Engine:
JavaScript is a programming language commonly used for adding interactivity and dynamic behavior to websites. The JavaScript engine interprets and executes JavaScript code. Also, there is a CSS engine that applies styles to the DOM elements.
UI Backend:
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
User Input
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.
HTTP Request
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.
Server Processing
The server processes the request. If it's a simple request for a webpage, the server retrieves the requested files (HTML, CSS, JavaScript, images, etc.) and prepares to send them back to the browser.
HTML Parsing
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
JavaScript Parsing and Execution
If the webpage includes JavaScript, the browser's JavaScript engine processes and executes it. This can modify the DOM or CSS, adding interactivity and dynamic behavior to the page.
Rendering
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.
Displaying
The painted pixels are displayed on the screen, and you see the webpage.
Summary
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.