Hello, You all use the browser in everyday life for surfing world wide web (www). But many people would have raised the question that what is browser and how the browser works.
Here I am going to explain to you what is browser and how it works.
What is the browser?
The browser is the application with the graphical user interface for displaying HTML Which is used to navigate world wide web (www).
It is a software application that came with the internet.
Its full name is a Web browser, It sounds itself, where web means internet, and with the help of it, you can browse anything on the internet.
Internet and web browser both are connected with each other i.e internet is nothing without browser and browser is noting without internet.
It is like the connection or way between two worlds, internet and real.
How works browser?
Web browser converts web pages into normal graphical pages (text, images, videos etc).
Now the question is what is a web page?
Web pages are the pages, which is created by a programming language such as HTML, CSS, Php etc
So the only work of the browser is to show web pages on the browser screen (Document).
The only browser has own rendering engine. For example, Firefox uses Gecko rendering engine And Google Chrome and Safari have Webkit rendering engine.
- Rendering engine - It is an engine which works to render web pages into normal text or images.
Where Webkit is an open source rendering engine which was developed for Linux. After that Microsoft and Apple had modified it for IOS and Windows support.
Now let's see how does render engine works
Rendering Engine receives the content of the Requested Document from the Networking Layer. Normally, the Rendering Engine is received as 8KB Memory Chunk. After obtaining the Document Content from the Network Layer, Rendering Engine works in the following Flow.
Rendering Engine starts parsing HTML Document and converts various HTML Elements into DOM Nodes, which is called Content Tree. It also parses the Style Data (Inline Style, External Stylesheet) and creates a new tree by combining both Structural Information (Stylesheet) and Styling Information (Stylesheet), which is called "Render Tree".
With all the Style Attributes, a rectangle of every node is formed in Render Tree, which contains information about color, dimensions, etc. All Rectangles are in the same sequence, in which they are specified in the HTML document.
After making the Render Tree, this takes place on the Layout Process i.e. specifying the Exact Coordinates of each Node of the Rendering Engine Tree, which determines where every Node will appear exactly in the Screen window of the Web Browser.
Lastly, the Traversing of every Node of the Render Tree is done by the User Interface Backend Layer, and every Node is painted in the Web Browser's screen at its Exact Location.
Rendering Engine does not wait to be downloaded to the Web Browser in the whole document, but as the content of the document gets downloaded in the rendering engine, Rendering Engine keeps rendering it in the Web Browser.
Generally, all Web Browsers follow this sequence. But WebKit's Working Strategy is a little different. Gecko calls a tree of Visually Formatted Elements named "Frame Tree", in which every element is a frame. While Webkit uses the word "Render Tree" instead of "Frame Tree", all the elements in it are called "Render Objects".
The process of placing the Elements is called "Layout" in Webkit, whereas in Gecko it is called "Reflow". The process of connecting DOM Nodes and Visual Information is denote in Webkit by the word "Attachment".
The main difference between both Webkit and Gecko is that Gecko has an extra layer between HTML and DOM Tree, which is called "Content Sink", which works to create DOM Elements.
Post a Comment