What is a web browser and how does it work?

If you’re a front-end developer or want to be, it might be helpful to know how browsers work. You can see in advance how the code you wrote works on the browser and how it is displayed to the user. This process can give you an idea of what steps you can follow to solve the problems you encounter.

Also, after learning how browsers work, we’ll start with you as the next step in a series on how to become a front-end developer. Through this series of articles, you will learn the following:

• You will learn CSS syntax rules correctly.
• You will be able to properly improve web page performance.
• When using multiple CSS files, you can learn how the browser processes these files and what it prioritizes.
• You will learn JavaScript syntax rules properly.

What is a web browser?

Currently, the popular web browsers in the market are Chrome, Firefox, Safari, Opera, Edge, and Brave. To explain the main function of the browser simply, we can say that it establishes a connection to the servers connected to the Internet with the help of Hyper-Text Transfer Protocol (HTTP) and allows the user to view the content. These contents can be HTML files, CSS files, PDF files, Pictures, videos, or other content.

Browsers interpret websites with the help of HTML and CSS and present us with a usable image. These specifications are provided by the World Wide Web Consortium (W3C). However, since each browser has its own standard, the websites created can be displayed differently in each browser. This causes inconsistency. You can follow different steps to avoid this situation. We will discuss this issue on a different topic.

In the list below we have listed some of the organizations that set these standards. It can give you an idea of what standards websites and network systems must comply with:

• IETF (Internet Engineering Task Force): Internet standards (STD), which among other things govern the set-up and use of URIs, HTTP, and MIME
• W3C (Wide Web Consortium): specifications for markup language (e.g., HTML), style definitions (i.e., CSS), DOM, accessibility
• IANA (Internet Assigned Numbers Authority): name and number registries
• Ecma Intl.: Scripting standards, most prominently for JavaScript
• ISO (International Organization for Standardization): Standards governing a diverse array of aspects, including character encodings, website management, and user-interface design

It would not be wrong to say that there is a big difference between the browsers of the past and the browsers of today. With today’s browsers, we can organize video conferences, develop plug-ins, and perform 3D operations very easily, but these are not the subjects of this article.

The UI components of the browsers

All browsers have common features. When you run different browsers, you will see a search bar, forward and back keys, bookmarks, refresh button, tab area, status bar, content area, etc. However, there is no common standard for them. It’s all about what browser developers and UI designers want to provide to their users.

The browser’s high-level structure

Below you can see the main components of a browser. Browsers usually repeat the following steps for each tab. We will explain them one by one.

• User Interface: In the UI, there are items such as the toolbar, forward/back buttons, and the bookmark menu.
• Browser Engine: It enables interaction between User Interface and Rendering Engine.
• Rendering Engine: It is responsible for displaying the requested content on the screen.
• Networking: It manages different protocols such as HTTP Request, WebSocket, and WebRTC between the browser and servers.
• JavaScript Interpreter: It parses the JavaScript codes on the page to run them.
• UI Backend: Provides basic graphical components such as combo boxes and windows for users.
• Data Persistence: It keeps and provides access to the data that should be kept by the browser. It also supports storage systems such as cookies, localStorage, IndexedDB, WebSQL, and FileSystem.

Examples of rendering engines

Here are some popular examples of browser rendering engines. You can check this link for more detailed information about them.