loading image... Gichuki P Mwangi

The Web Browser

Before I start off, I’d like to mention that I’ll bring in some terms that most of you might be unfamiliar with. I shall reduce them to only the necessary terms but as usual, if you get lost in the definitions make sure to leave a comment in the comment section below and I’ll get back to you. Moving on…

The web browser is by far the most popular computer program. It is so much so, that it has become a necessity. You don’t even bother to think if you require it because it is a need. This is the salt of the internet – good food cannot be without salt. You use it for social media, for news, for entertainment and many other things that may not be audience friendly. To be frank, applications such as WhatsApp borrow from web browsers and then have some tweaks. But really, what is a web browser and how does it work? This article demystifies this all too important computer program.

A web browser has the major duty of presenting web resources that a user requests. The resource requested is mostly HTML but many times, it can be some other format including CSS, images, PDF or video. In addition, the browser should be able to allow input and output functionalities supported by a wide variety of programming languages including PHP, JavaScript, Python and so forth. That is not all. The browser must be optimal in performance, should abstract the user from the complexities of the internet and should conform to the World Wide Web Consortium (W3C) standards. Seems like a lot. It is true, the browser is not a simple piece of software.

What are the main components of a web browser?
The browser has the following main components; the user interface, the browser engine, the rendering engine, the networking layer, the user interface back end, the JavaScript Interpreter and the Data Storage module. Let us briefly describe each one of them.
1. The User Interface (UI)
This is the section of the browser that you interact with. You can see it and you can use some input devices like the mouse to interact with it. It includes the back and forward buttons, the reload button, the home button, the address bar, bookmarks toolbar and so forth.
2. The Browser Engine
It is important to note that the UI does not really perform any task other than enabling you to interact with the browser. There are modules that lie in the background that enable the browser to work as it does. To ensure that the browser works as the user anticipates depending on the user actions, it has to be connected to these background modules and the Browser Engine does this work.
3. The Rendering Engine
This module enable you to see what you see. It parses content as requested by the user and displays it on the screen. Let us take an example of an HTML document. When a user requests it, CSS supporting the document and HTML is parsed and displayed on the screen.
4. The Networking Module
The browser is a networking software and as such, it must have a module dedicated for that purpose. The networking module interprets requests such s network calls (e.g. https and http) for all the different platforms. This is done with the assistance of a platform independent interface.
5. JavaScript Interpreter
It is important to note that JavaScript is a programming language of HTML and the Web. It runs on a browser not a server. The JavaScript interpreter is used to parse and execute JavaScript code.
6. Data Storage Module
The web browser (and you) need to save all sorts of data ranging from cookies, audio and movies among others. This is achieved by the data storage module.

The rending engine is important and different browsers have different rendering engines that they use. Firefox uses Gecko while Chrome uses Blink rendering engine. The rendering engine can parse HTML and XML files by default and would require plug ins to enable parsing of other types of files. When a user requests a web resource, this is what happens…

In chunks of 8kb (usually), the rendering engine acquires the resource through the networking layer from the server. After the resource has been acquired, the rendering engine must then initiate a process that leads to readable content by the user. Briefly, this follows the following procedure: HTML is parsed to construct a tree structure, and the tree is rendered to produce visual attributes. Coordinates as should appear on the screen are given per tree node and finally, the document is presented as seen on the screen. But that is just the rendering engine part let us look at the whole process in easy to understand steps.

The whole process, simplified:
The first step is that you type the website address into the browser and you let the browser do the rest. The rest is this;
♠ The browser parses the information to the networking layer to find the protocols (e.g. https), the location of the website and other relevant information. The website address is changed into an IP address.
♠ A connection is established between the client computer and the server through a port.
♠ The server digests the request and launches a plugin that is needed to handle the request allowing the plugin to get access to the full request. The plugin start to prepare a response. This includes database searches, and concatenation of all relevant data into a long text string and then sends it back to the browser.
♠ The browser receives the information from the server and produces a tree (called a DOM tree) and for each new resource (including images, audio, video etc.) found, the browser sends another request for retrieval purposes.
♠ Cascading Style Sheets (CSS) are parsed for each node in the tree created plus, JavaScript is also parsed and executed, updating the tree relevantly.
♠ The browser renders all the information on the browser window.
♠ You then see the page as is.

As you can deduce from the information presented, all this process is quite long and repetitive. So, next time you think of cursing a web browser, reconsider.

Gichuki P. Mwangi

A computer scientist with a passion to solve real world, day to day problems using new computer technologies and those already in existence.

Leave a Reply

Your email address will not be published. Required fields are marked *