Skip to main content

How Web Browser Works

A web browser commonly known as browser is a software application installed on a pc to allow access to the internet. It displays the web pages from servers together with other files such as images,videos etc, interprets and shows them on the screen. All you do is input the URL (Universal Resource Locator) address of a webpage in the address bar and the browser will display the web page on your  pc screen.

Layout of a Browser
A browser’s basic function is to get files from a server and display them on the screen. It normally displays html files with images, PDF, videos etc in a structured layout. A browser is a collection of blocks or lines  code  that performs numerous tasks of showing a webpage on the  pc screen. These codes are arranged in to different components according to their works they do. The layout of a browser is shown in the below image.

1.      User Interface: the space of interaction between users and the browser.Common inputs for user interface are - address bar, next and back buttons,home button, refresh and stop buttons etc.
2.      Browser Engine: the block code that connects input from the user interface to the rendering engine. It performs the work of querying and manipulating the rendering engine in-accordance with inputs from various user interfaces.
3.      Rendering Engine: the part that performs the work of displaying the requested content on the screen. It first parses the html tags and making use of  the styles, it constructs a render tree and finally a render layout that displays the content on the screen.
4.      Networking: the part of the code written in the browser, performing the function of sending numerous network calls. For example sending the http requests to a server.
5.      Java Script Interpreter: the component of the browser compiled to interpret the java script code present in a web page.
6.      UI Backend: it draws basic widgets on the browser like combo boxes, windows, etc.
7.      Data Storage : the minute database created on the local drive of the pc where the browser is installed. This database stores various files like cache, cookies, etc.
How Web Browsers works?
World Wide Web based on the client-server model. A user pc works as a client which receives and sends data to the server. If a web page is requested by a user, the browser contacts the server (where the website is stored) and by getting and interpreting the requested files, it shows the web page on the pc screen.
The entire procedure occur following three steps:
1.      Contact to DNS Server : if a user enters a URL into the address bar and press ‘enter’, immediately the browser contacts the DNS server,which stores the IP addresses of the server connected to the corresponding domain names. The DNS server fetches the domain name from the browser and returns the associated IP address to the browser.
2.      Contact to Server :After fetching the IP address of the server of the requested webpage, the browser sends a request to that server for the required files. For example the following URL :
http://www.electro-adebayo.blogspot.com/how sonar works
The URL is split in three parts. First is HTTP – a protocol known as Hyper Text Transfer Protocol which determines the manner the browser communicates with the server. Second is www.electro-adebayo.blogspot.com  translated by the DNS server with the IP address. It is the address of the computer (Web Server) where the requested web page is stored. Third is ‘how sonar works’ which tells the address of the file that is stored in the root folder of the website.
 HTTP protocols are used to transfer the webpage known as ‘how sonar woks’ to the browser. The protocol determines the format and the method of communication between web client and server.

3.      Rendering – The whole process undergone by a browser beginning with fetching the webpage to displaying it on the screen is known as Rendering. It is takes place in the following steps:
 
Rendering in Browsers

a.   Loading HTML – As soon as the web page is located by the browser, it is fed in to the browser using the http protocol. All html tags and other resources (such as images, flash files etc) referred in the html tags are loaded separately.
b. Parsing – An HTML Parser begins to interprete the html files and building subsequent content tree.
c.  Apply Styles – Web pages also have style sheets attached to them and a web browser possesses its default styles. Using a CSS parser, they are interpreted so as to define the styles (like height, width, spacing, border, color, margin, etc.) for the content in the specified html.
d.  Construct Frames – With the help of HTML and style sheets, the browser constructs the frames. A frame is a rectangular block that possesses numerous properties like width, height, color, spacing, etc.
e.   Frames Layout– This process includes arranging all frames in sequence to form a layout of the web page. 
f.    Frames Painting– As the layouts are  being constructed,the next stage is painting. Painting is the word to denote the process to exactly render the objects on the screen,after which the webpage is displayed on the pc screen. A browser undergoes all the processes in a flash of a second.
          Major Web Browsers
Labels:

Comments

Post a Comment

Popular posts from this blog

How Google Fiber Works

Some of us are old enough to recollect a time when everyone on the Internet used it through a dial-up connection. Your computer connected to a modem that noisily calls the phone number of an  ISP (Internet Service Provider) to allow you connect at 56 kilobits per second, if you were quite fortunate to have a faster modem. Web pages  load slowly onto pc screens.Pictures usually use a lot of time to fully show up. Software usually take hours to fully download. If you do not have a dedicated phone line, you would tie up the line, and the connection may trigger off if someone calls the phone line. We used  more of text than other bandwidth-hungry media out of need. Recently Internet connection speeds have increased tremendously from the use of broadband connections using technologies like cable and DSL (Digital Subscriber Lines) and 4G or LTE .  According to the FCC's standards, the new goal is for all household to have access to broadband with a minimum speed of...
3 comments
Read more

How sonar works

Sonar(sound navigation and ranging) is the use of an echo.If an animal or machine makes a noise, it sends out sound waves into the space surrounding it. The waves bounce back off objects in its path, and some are reflected back to the source of the sound. It's the reflected sound waves that you perceive when your voice echoes back to you in an empty room.  Whales and special machine use reflected waves to locate distant objects(Echo location) and detect their shape and movement. The range and limit of low-frequency sonar is astonishing. Dolphins and whales can differentiate between very small objects size of a pellet 50 feet (15 meters) away, and they use sonar more than sight to locate their food, families, and direction.Whales send signals out bin the range 160 to 190 Db.Bats also use it to locate prey and navigate from obst...
Post a Comment
Read more

How Google Loon Works.

It is believed that a lot of people are hooked to the  Internet   ,but this is only partially true. Around 4 billion people do not have access to the internet as of late 2015. Several people reside in place where there is no internet infrastructure,or where coverage is unavailable or exorbitantly high. Google, known for its numerous high-tech pursuits,has several projects in the development stage to bring high-speed Internet access to the a lot of people. Their Fiber project aims to provide Gigabit internet service,which faster than the existing connection speeds we are used to. Using fiber optics,it has programs going on in several cities in the US. The firm has a different project focused on taking high-speed Internet access to places that do not have it. The project uses a technology we call it primitive — balloons! The project is known as Project Loon ,because it involves using  balloons  and also because it sounds looney. Google intends to create wireless...
Post a Comment
Read more