How Browsers Render a Web Page
Web Browsers are the most widely used software. In this article, I’ll explain “how browsers work to render a web page on the screen”. Nowadays, Chrome, Internet Explorer, Firefox, Safari, and Opera are mostly used Browser in the desktop for Web browsing while On mobile, Uc Browser, Android Browser, Opera Mini, iPhone are widely used. First, we’ll discuss all the components of the Browser.
Components of Browser
the browser’s main components are:
- The User Interface: it contains every part of the browser display on the screen except the window where you see the web page itself. it includes Address bar, back & forward button, refresh button, home button, Bookmarking menu etc.
- The Browser Engine: The interactions between the user interface and the rendering engine are handled by the Browser engine.
- Rendering Engine: it is responsible for displaying the Web page. it parses the HTML and CSS and displays the parsed content on the screen. We’ll talk about Rendering Engine in more details.
- Networking: it is responsible for the network calls such as XHR request.
- UI backend: it’s used for drawing the core widgets such as checkboxes and windows.
- JavaScript interpreter. This is where parsed and executed JavaScript code.
- Data Storage: you may need to store data locally for your app, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL, and FileSystem.
Rendering engines
The main responsibility of the rendering engine is to display the requested page on the browser screen.
Rendering engines can display HTML and XML documents and images. If you’re using additional plugins, the engines can also display different types of documents such as PDF.
Similar to the JavaScript engines, different browsers use different rendering engines as well, such as Firefox uses Gesco, Webkit in Safari and Blink in Chrome and Opera. let’s discuss the process of rendering the page:
- Receives the requested document
The rendering engine receives the contents of the requested document from the networking layer in HTML.
2. Construct the DOM tree
Parsed the HTML into the parsed tree and then construct the DOM tree using it. like this:
3. Construct the CSSOM
CSSOM stands for CSS Object Model. After constructing the DOM tree, it finds a link tag in the head section which was referencing the external style.css CSS style sheet. so, it parsed the CSS file in CSSOM tree, something which the Browser can understand as the DOM tree.
4. Construct the Render tree
HTML DOM tree combined with the styling data of the CSSOM tree is being used to create a render tree.
Render tree is the visual representation of the HTML along with the corresponding CSS. The purpose of this tree is to enable painting the contents in their correct order. Each node in the Render Tree is known as a renderer. The Render tree looks like:
5. Layout
When the renderer is created and added to the tree, it does not have a position and size. Calculating these values is called layout.
The coordinates system is used for the positioning of the element like the position of the root renderer is 0,0. Layout is a recursive process — it begins at the root renderer, which corresponds to the <html> element of the HTML document. Layout continues recursively through a part or the entire renderer hierarchy, computing geometric info for each renderer that requires it. Starting the layout process means giving each node the exact coordinates where it should appear on the screen.
6.Painting of the Render Tree
In this stage, the renderer tree is traversed and the renderer’s paint()method is called to display the content on the screen. For better UX, the rendering engine will try to display the contents on the screen as soon as possible. It will not wait until all the HTML is parsed to start building and laying out the render tree.
So, Finally, it displayed the content on the window. let’s see again all process in the figure below:
If you like this blog or it helps you in any manner, please let me know by a comment on it. it’ll encourage me to write more articles.
If you have any issue regarding this article, feel free to contact me on:
