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.
