Web Browsers : What is Web Browser

By the time you are reading this article, certainly you are already using a web browser An Representational Image Of Various Web Browser

Fig. 1: An Representational Image of Various Web Browser

which is presenting this article content in a rich text/graphical format on your computer screen. A web browser or frequently called as browser is an application software that is installed on a computer to provide access to the World Wide Web. It fetches the web pages from the server along with the necessary files like, images, flashes, videos etc, interprets them and then displays it on the screen. All you have to do is simply type the URL (Uniform Resource Locator) of a webpage in the address bar and the browser will bring the web page on your screen.

Architecture of a Browser

The browser’s main functionality is to fetch the files from the server and to display them on the screen. It basically displays html files containing images, PDF, videos, flashes, etc in an ordered layout. A browser is a group of structured codes that performs plenty of tasks to display a webpage on the screen. These codes are separated in to different components according to their tasks performed. The structure of a browser is shown in the below image.

Fig. 2:

Block Diagram Showing Web Browser Architecture

1. User Interface – It is the space where interaction between users and the browser occurs. Most of the browsers have common inputs for user interface. Some of them are – an address bar, next and back buttons, buttons for home, refresh and stop, options to bookmark web pages, etc.

2. Browser Engine – It is the piece of code that communicates the inputs of user interface with the rendering engine. It is responsible for querying and manipulating the rendering engine according to the inputs from various user interfaces.

3. Rendering Engine – It is the part thoroughly responsible for displaying the requested content on the screen. It first parses the html tags and then using the styles, it builds a render tree and finally a render layout, which displays the content on the screen.

4. Networking – The fraction of the code written in the browser, responsible to send various network calls. For example sending the http requests to the server.

5. Java Script Interpreter – It is the component of the browser written to interpret the java script code presented in a web page.

6. UI Backend – This draws basic widgets on the browser like combo boxes, windows, etc.

7. Data Storage – It is small database created on the local drive of the computer where the browser is installed. This database stores various files like cache, cookies, etc.

How Browsers work?

World Wide Web works on the client-server model. A user computer works as a client which can receive and send data to the server. When a web page is requested by a user, the browser contacts the requested server (where the website is stored) and by fetching and interpreting the requested files, it displays the web page on the computer screen.

Fig. 3: Simple Block Diagram Showing Working of Web Browser

Although working of the browser is not as simple as it seems, since a plenty of internal tasks are performed before a webpage appears on the screen. The whole process takes place in these three steps:

1. Contact to DNS Server – When a user enters a URL into the address bar and hits ‘enter’, at first browser contacts the DNS server. A DNS server stores the IP addresses of the server associated with the corresponding domain names. The DNS server takes the domain name from the browser and returns the corresponding IP address to the browser.

2. Contact to Server – After getting the IP address of the server for the requested webpage, browser sends a request to that server for the desired files. For example consider the following URL :

http://www.engineersgarage.com/articles

This URL is divided into three parts. First one is HTTP – it is a protocol named Hyper Text Transfer Protocol which defines the way browser communicates with the server. The second part is www.engineersgarage.com which is translated by the DNS server with the IP address. It is the address of a computer (Web Server) where the requested web page is stored. The third part is ‘articles’ which tells the address of the file that is located in the root folder of the website.

HTTP protocols are used to transfer the webpage named ‘articles’ to the browser. The protocol decides the format as well as the methods of communication between web client and server.

Working Contd

3. Rendering – The entire process followed by a browser from fetching the webpage to displaying it on the screen is called Rendering. It is executed in the following steps:

Fig. 4: Typical Block Diagarm Showing Rendering Process in Web Browsers

a. Loading HTML – As soon as the web page is found by the browser, it is loaded in to the browser using the http protocol. All the html tags as well as other resources (like images, flash files, pdf, etc) referred in the html tags are loaded separately.

b. Parsing – An HTML Parser starts interpreting the html files and building subsequent content tree.

c. Apply Styles – Web pages may have style sheets attached and a web browser also has its default styles. Using a CSS parser, they are interpreted in order to define the styles (like height, width, spacing, border, color, margin, etc.) for the content specified in the html.

d. Construct Frames – Using the HTML and style sheets, the browser constructs the frames. A frame is a rectangular block with various properties like width, height, color, spacing, etc.

e. Frames Layout– This process includes arranging all the frames in order to make a layout of the web page. The visual display for layout process of Google.com is shown in this video:

f. Frames Painting– As soon as the layouts are constructed the next process is painting. Painting is the term used for the process to exactly render the objects on the screen and after that, the webpage is displayed on the computer screen. A browser executes all the processes in a flash of a second.

Error & Mobile Browser

Different Error Messages

Some times after entering the URL in to the address bar, we are expecting the webpage but a message appears showing an error. These are some common error messages:

1. 404 Not Found – This error message is shown by the browser when it is unable to find the web page specified in the address bar. It may be because of the wrong path entered or the specified file has been deleted.

2. 401 Unauthorized or 403 Forbidden – In some cases website or the server where the requested web files are stored, may be password protected and you are not authorized to access the files. Then such a message will appear on the browser.

3. Spinning Hourglass – It is not an error message. A spinning hourglass is displayed on the browser window to indicate that the browser is trying making a connection with the requested server.

Mobile Browsers

The increasing access of internet over mobile phones created a need of special dedicated browsers. Mobile phones have limited resources (memory, storage, processor, etc) so they require a light mini browser for accessing the World Wide Web. Hence these browsers, commonly called as Mobile Browsers are optimized to display the websites in more effective manner on the mobile phones and PDAs.

Fig. 5: An Image of Displaying Web Browser on Mobile Phone and PDA

Mobile browsers are able to displays the web pages written in HTML, XHTML. The latest mobile browsers also support technologies like CSS, Java script & AJAX. A lot of browsers are available for mobile phones, among them Google Android, iPhone OS, Symbian, etc are some popular mobile browsers.

History

Browsers are existing in the computers since the early spread up of the internet. The first ever browser was named ‘worldwideweb’ created by Tim Berners-Lee on a Next computer in December, 1990. It was presented to the number of people at CERN (European Organization for Nuclear Research) in March, 1991.

Berners-Lee and one of his student at CERN named Jean-Francois Groff ported the ‘worldwideweb’ from Next computer to the more common C language during 1991 – 1992. The new project was called as “Libwww”. At the same time Nicola Pellow a math student interning at CERN with his team wrote another browser named ‘Line-mode’ which worked on a range of different computers from Unix to Microsoft DOS. During the 1992, there were four different browsers launched with some advanced features named Erwise, ViolaWWW, Midas & Samba in chronological order.

The first major browser ‘Mosaic’ was launched in 1993 by Marc Andreessen and Eric Bina from the NCSA. It was a cross platform browser having features like bookmarking, history, audio – video support, etc. Later in august 1994 NCSA assigned the legal rights of Mosaic to Spyglass Inc. which afterward licensed the technology to several other companies including Microsoft for Internet Explorer. In January 1994, NCSA stopped developing it further.

Fig. 6: An Image of First Major Browser ‘Mosaic’ Launched in 1993 by Marc Andreessen and Eric Bina

In 1994, a team of researchers at a telecommunication company called Telenor in, Norway started developing a new browser ‘Opera’. Later two members from the team Jon Stephenson von Tetzchner and Geir Ivarsøy left the company and started ‘Opera Software’ and launched the first version Opera 2.1 commercially during the summer 1996. A new browser named Navipress was launched in February 1994 for PC and Macintosh which was later renamed as AOLPress. It is still available to download but has not been maintained since 1997.

On December 15, 1994 the first commercial version of Mozilla, Mozilla 1.0 was launched by Netscape. In 2002 it was made available as open source browser and later in end of 2004 it was renamed as Firefox. ‘Internet Explorer’, a web browser developed by Microsoft was launched with the operating system Windows 95.Because of the wide reach of Microsoft, it became the leading web browser by 1999.

On September 2, 2008 Google released the first beta version of the browser ‘Chrome’ for Microsoft Windows. Later in December 2008 the first stable version was released and since then it is continuously increasing its popularity between internet users.

Market Share

A number of browsers are fighting (also called Browser wars) to increase their presence on the computers over the world. In the late 1990s, Internet explorer became the largest used browser leaving behind the prime rival ‘Netscape’. In the new century some new browsers like Mozilla Firefox, Chrome, Safari, Opera, etc. appeared in the picture, strongly competing the Internet Explorer. Following is the table that displays the market shares of different browsers during the month August 2011.

Usage share of browsers for August 2011
Source	Internet Explorer	Firefox	Chrome	Safari	Opera	Mobile	Unknown
Net Applications	51.8%	21.1%	14.5%	7.7%	2.9%	6.4%
Stat Counter	38.9%	25.5%	21.5%	4.8%	1.6%	7.1%
W3Counter	35.4%	26.7%	20.2%	6.2%	2.3%		9.2%
Clicky	41.9%	26.9%	20.9%	9.0%	1.2%
Wikimedia	36.3%	24.1%	18.2%	10.7%	4.4%	9.6%

As per the W3Counter, Internet explorer is still the most widely used web browser with a market share of 35.4% users. While Firefox is on the second position with a 26.7% user base and Chrome is on the third position with 20.2% user base. There are some other browsers like Safari, Opera & mobile browsers which have the small share in the market place.