How do web browsers work

Jessica Mishra
Last Updated: May 13, 2022

Introduction:

Web browser is an application that we use to access the World Wide Web. Web browsers make our life a lot easier. We use them very frequently. Without them, searching for information on the internet wouldn't have been possible. 

 

To know more about web browsers, check out the blog What is a web browser?

 

In this blog, we will learn about the components and working of the web browser.

Architecture of a Web Browser

To understand the working of the web browser, let us talk about the components of the web browser.

Architecture of Web Browser

Source: tutorialspoint

 

The parts playing role in the working of the web browsers are:

  1. Controller/Dispatcher: It takes in information, interprets it, and gives instructions to the device.
  2. Interpreter: It receives information from the controller and starts performing step by step.
  3. Client Program: It specifies protocols such as HTTP(Hypertext Transfer Protocol) and FTP(File Transfer Protocol) to complete a service.

Components of a Web Browser

Components of Web Browser

 

Let us look at some components of the web browser and their role in the working of the web browser.

  1. User Interface (UI): It ensures smooth interaction between the browser and the user. It contains features like the search bar, refresh button, bookmarks, etc.
  2. Browser Engine: It bridges the gap between UI and rendering engines. It is responsible for all actions between UI and rendering engine.
  3. Rendering Engine:  It is the core component of a browser. It transforms simple HTML pages into the webpage that we see. It is responsible for showing the requested content.
  4. Networking: This is the component of the browser that retrieves URLs (Uniform Resource Locator) using protocols like HTTP. It is responsible for security and communication.
  5. Data Storage (Cookies): Websites store information about the user in files known as cookies. This is usually done so that the user does not need to enter their information again and again, like username and password. Some cookies, known as third-party cookies, store other detailed information about user interests and web browsing patterns. Third-party cookies are stored so that the site can provide targeted content or ads. 
  6. JavaScript Interpreter: It is responsible for interpreting the JavaScript code. After interpretation, it sends the result to the rendering engine so that it can be displayed. 
  7. UI Backend: It is mainly used for drawing widgets like windows. 

 

Rendering Engine:

The rendering engine plays an important role in the working of the web browser.

Let us understand the flow of the rendering engine. 

Flow of rendering engine

 

The rendering engine constructs a DOM (Document Object Model) tree (also known as a content tree) by parsing the HTML document and internal CSS files and converting the elements into DOM nodes. 

 

During this time, the browser constructs a render tree which is the visual representation of the document. It acts as an input to paint the process that renders the content in its correct order.

 

The render tree then goes through a process known as the layout process. In this, each node is assigned with the exact coordinate of its location on the screen. In the next stage, known as painting, the render tree will be traversed, and each node will be painted using UI backend.

 

And this is how the rendering engine helps in the working of web browsers.

General Working:

Let us talk about the basic working of the web browser:

Source: ArthurWiz.com

 

  1. When the user enters a web address or a URL, a request is sent to the DNS(Domain Name Server). DNS acts like the phonebook of the internet. It contains the list of system names with their corresponding system address.
  2. The DNS provides an IP address to the web server. Using the IP(Internet Protocol) address, the web browser sends the request to the server. 
  3. Once the server is recognized by the browser, it initiates a TCP(Transmission Control Protocol) exchange and starts the HTTP exchange in which the browser conveys its need to the server, and the server responds.
  4. The browser collects all the content and displays it to the user.

 

Frequently Asked Questions:

1. What are DOM and CSSOM?

Ans-> While parsing, HTML document gets converted into DOM (Document Object Model) and the CSS document gets converted to CSSOM (CSS Object Model). 

 

2. How does DNS work?

Ans-> DNS translates the domain name into IP address so that the user does not memorize IP addresses. 

 

3. What is the difference between the web browser and the search engine?

Ans-> Web browser is used to retrieve and display web pages. A search engine is a website or application where users can search for web pages. 

 

4. Can cookies be harmful?

Ans-> Cookies are not harmful themselves. They do not contain any viruses or malware. But they do hold personal data and sensitive information, which can make them a target for hackers.

Key Takeaways:

In this blog, we talked about the working of the web browser and the architecture and working of the web browser. We also discussed the rendering engine.

 

Readers start your web development journey now with Intro to HTMLIntro to CSS, and JavaScript Introduction.

 

If you are preparing for your next web development interview, check out the blogs, 25 CSS Interview Questions, and 30 JavaScript interview questions.

 

We hope you found this blog helpful. 

Was this article helpful ?
1 upvote