Behind the screen : In a BROWSER

We spend a lot of time everyday surfing internet on web browsers but have you ever wondered how these web browsers work. Read through this post to get the basic idea of what happens when you surf through the internet.

Components of a WEB BROWSER

Browser Components

The User Interface : It consists of everything you see on browser pane except what you see in the browser window.

The Browser Engine : It works as a mediator between the user interface and the rendering engine.

The Rendering Engine : It parses and renders the HTML, CSS, and JavaScript files it receives from the server and displays it onto the browser window.

JavaScript Interpreter : It interprets the JavaScript files received from the server and transfers the information to the rendering engine which renders it to the browser window.

UI Backend : Used for drawing basic widgets and combos. It exposes a generic interface and is not platform specific.

Data Storage : it is the persistence layer. It stores important data like cookies, IndexedDB, localStorage, WebSQL locally.

The RENDERING Engines

The rendering engine renders i.e. displays the requested contents on the browser screen. Rendering engines can only render HTML, XML and images in default state however other types can be rendered using a plug-in.

Different browsers use different rendering engines. WebKit is an example of open-source rendering engine. It started as an engine for Linux but was later modified by the Apple for Mac and Windows.

Working of the rendering engines

The networking layer provides the rendering engine with the required documents. The rendering engine parses the HTML document and convert elements to DOM nodes in a ‘content tree’. The engine also parses the style data both in the external files and in style elements. Styling instructions along with visual instructions in the HTML are used to create ‘render tree’.

The render tree contains rectangles with visual attributes such as colors and dimensions. The rectangles are in the right order to be displayed on the screen. After this comes the layout process in which the each rectangle is given the exact co-ordinates where it should appear on the screen. After the layout operation is the paint operation in which whole of the render tree is traversed and the elements are drawn on the browser window using the UI backend layer. This whole process does not take place one by one but takes place simultaneously. As soon as the certain part of the HTML is parse it is passed on for layout and paint operations while the rest of the HTML is still being parsed along the files being received from the networking layer.

NOTE : In most of the modern browsers there are many tabs and each tab works on different instance of the same rendering engine.

The Render tree relation with the DOM tree

The renderers in the render tree correspond to the DOM elements but the relation between them is not one-to-one. For ex:- head elements and all the other elements with display value assigned to none. Some DOM elements have more than one visual elements and therefore cannot be confined within a single renderer. For ex:- ‘select’ element has three renderers one for the drop down list box, one for the display and one for the button. Also some render objects correspond to a DOM node but not in the same place in the tree.

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 or reflow. HTML uses a flow based layout model, it means that it is possible to compute the geometry of the layout in just one single pass. Elements later in the flow typically do affect the layout of the elements earlier in the flow. However this is not true for tables as they require more than one pass.

Painting

The render tree is traversed and the renderer’s ‘paint()’ method is called which paints the layout on the screen. Painting is of two types : global and incremental. In incremental painting some of the renderers can change in a way that it does not affect the other renderers. If the renderer invalidates it’s rectangle on the screen, the OS marks it as a dirty region and generates a paint event.

The browsers are programmed to do minimum possible actions in response to a change. For ex:- change in element’s color will only cause repaint of the element, changes to the element position will cause layout and repaint of the element, it’s children and possibly siblings, and adding a DOM node will only cause layout and repaint of the node. However major changes like changing the font will cause invalidation of caches, relayout and repaint of the whole tree.

Behind the screen : In a BROWSER was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.