Structure of a Browser
Primary components of a browser are
1. User Interface – This consists of forward and back button, bookmarks, address bar etc. along with the window that displays the requested page.
2. Browser engine – It commands action between rendering engine and the user interface.
3. Rendering engine – The main function of rendering engine is to display the content that is requested. For example, if an HTML content is requested, the engine parses CSS and HTML and when the content is parsed, it is displayed on the screen.
4. User Interface backend – It can be used for painting basic images like windows or combo box. The backend exposes only a generic platform independent interface. Beneath it, user interface methods are used by the operating system.
6. Networking – Performs implements of HTTP request and response.
7. Data Storage – All types of data, like cookies are saved locally by the browser. Storage mechanisms like WebSQL, FileSystem, localStorage are also supported by the browser.
The networking layer provides the rendering engine with contents of the document that is requested. The contents are generally transferred in chunks of size 8kb each. Once that happens, the following flow occurs.
A content tree is created by the rendering engine where the HTML elements get parsed and get converted to DOM nodes. Style data in both internal and external CSS are parsed and visual information along with styling is used to create the render tree.
Rectangles with specific colours and dimensions are arranged inside the rendered tree. They are meant to be in the right order to be rendered on the screen.
Once the rendered tree is constructed, it follows the layout process where each node is given the exact coordinates, according to which they should be displayed on the screen.
The final stage is painting. Each node in the render tree will be designed according to the code written in the backend layer of the UI. Painting usually takes place in an order
a.Background color is assigned first.
b.It is immediately followed by background image.
c.Border is assigned.
d.Children are stacked.
e.Outline of the page is created.
All the processes that occur inside the rendering industry take place gradually. However, the job of a render engine is to display content on the screen as soon as possible for providing a better user experience. That is why, instead of parsing the HTML and building the entire content of the render tree in one go, it starts building few parts of the tree while other parts get parsed and build in the backend. Let’s take a detailed look at Layout, a complex part of a page’s lifecycle.