How Does A Browser Engine Work
Each time I navigated to a different web page on my browser I always wondered how does this Web browser Engine works and manages to display such colorful rich contents .
A Web browser displays the web resource, by requesting it from the server. A web resource is not necessarily HTML. It can also be a pdf , image or more. The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications. These specifications are maintained by the W3C (World Wide Web Consortium) organization, which is the standards organization for the web. You might have noticed that all of the browsers have following things in common in there user interfaces:
I made some google search – is there any formal specification about the components that a web browser should provide? Strangely there is no such formal specification . I found this strange because despite of the fact that there was no such formal specification , yet all the browsers that I have used till this date have common components in there user Interfaces. I read that this is due to some good practices that have developed over years of experience. Once you enter the URL "http://www.serverName.com/fileName.html" into your address line, the browser breaks that Web address down into three distinct parts.
What are the main components of a web browser?
Responsibility of the rendering engine:
To render the requested contents on the browser.By default a rendering Engine can display html, xml contents and images. With the help of plugins the rendering engine can display other components like pdf etc. When the rendering engine gets the contents of the requested document from the networking layer. It will start parsing the HTML document and turn the tags to DOM nodes in a tree called the "content tree". It will parse the style data, both in external CSS files and in style elements. The styling information together with visual instructions in the HTML will be used to create another tree - the render tree. Engines may wait for all data to be received before rendering a page, or may begin rendering before all data is received. What does a render tree contain? It contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen. After the render tree has been constructed, it goes through a "layout" process. Here each node is given the exact coordinates where it should appear on the screen. The next stage is painting - the render tree will be traversed and each node will be painted using the UI backend layer. After the painting you get to see your final requested data on the web page. |
JavaScript
JQuery HTML HTML5 |