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.
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.
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:
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