In the past years, when Internet Explorer dominated the market with 90% usage share, developers used to consider IE as a black box with nothing to do except view the rendered code. However, the present is the age of open source browsers. With browsers like Firefox and Chrome covering more than 50% of usage share, it has become quite easy for developers to look at what is happening under the hood. In brief, there are thousands of lines of C++ code. Let’s get a brief understanding of how a browser works.
Primary components of a browser are:
The networking layer provides the rendering engine with the content of the document that is requested. The contents are generally transferred in chunks about 8kb each in size. Once that happens, the following flow occurs:
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 content of the render tree in one go, it starts building a few parts of the tree while other parts get parsed and built in the backend. Let’s take a detailed look at layout, a complex part of a page’s lifecycle.
In the very first step of the rendering engine, HTML documents are parsed and the parsed elements are converted into nodes in the DOM tree. Each element in the tree is represented to be a parent node, within which the child elements are contained.
While the browser is working on parsing the HTML, it faces the “link” tag which references the external CSS linked to the page. It anticipates that the link is needed to render the complete page. A request is sent immediately to parse the CSS page.
When a renderer is added to the tree after creation, it does not have any size or position. The layout is the means of calculating those values.
A flow-based layout model is used by HTML. This means that, in most cases, the layout is completed in a single pass. Elements which are placed later in the layout tree do not impact the geometry of elements that are placed earlier. So, the layout can proceed in an omnidirectional way. Although there may exist some exceptions. More than one pass is required in the tables.
All renderers consist of a layout method, which occurs recursively through the child elements in the frame hierarchy. In a default HTML page, a root renderer is placed at the (0,0) coordinate and its dimensions serve as a part of the browser window that is visible, known as the viewport.
Process flow followed by a layout:
In painting, the
paint() method is called to render the UI infrastructure, custom styles, etc., on the component. Painting occurs either globally, where the whole render tree is painted at once, or in an incremental order, where the elements are stacked context wise.
When any custom style of the webpage is changed, the browser performs the minimal number of actions required, since any small change will result in the repainting of the entire element, and the layout will change its position and re-render the entire tree.
The z-index property of an element deducts where the element will be placed in the stack. In the stack, elements which are aligned at the back get painted first and elements with higher z-index value are arranged on the front and get painted last. These stacks usually have two types:
Browsers used nowadays are mostly freeware and fully functional that can render and display not only web pages but web applications as well. Some of them offer plug-ins that allow the user to get multimedia related information. Getting a clear understanding of how a browser works is highly beneficial for a web developer before using the developer console and building an interactive web application as every browser is developed differently, hence, it renders differently.
This is the main reason why a website looks different on different browsers. So, it is necessary to test any website on all browsers.
So, understand the browsers, develop, and test!
Happy developing and happy testing!