Understanding the Role of Rendering Engine in Browsers
By Jash Unadkat, Technical Content Writer at BrowserStack - November 15, 2019
Before diving into the role of a rendering engine in browsers, let’s quickly understand the underlying architecture of a web browser.
Understanding the architecture of a web browser
A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface. Refer to the image below to understand the key components involved in building a web browser.
- User Interface: This component allows end-users to interact with all visual elements available on the web page. The visual elements include the address bar, home button, next button, and all other elements that fetch and display the web page requested by the end-user.
- Browser Engine: It is a core component of every web browser. The browser engine functions as an intermediary or a bridge between the user interface and the rendering engine. It queries and handles the rendering engine as per the inputs received from the user interface.
- Rendering Engine: As the name suggests, this component is responsible for rendering a specific web page requested by the user on their screen. It interprets HTML and XML documents along with images that are styled or formatted using CSS, and a final layout is generated, which is displayed on the user interface.
Note: Every browser has its own unique rendering engine. Rendering engines might also differ for different browser versions. The list below mentions browser engines used by a few common browsers:
- Google Chrome and Opera v.15+: Blink
- Internet Explorer: Trident
- Mozilla Firefox: Gecko
- Chrome for iOS and Safari: WebKit
- Networking: This component is responsible for managing network calls using standard protocols like HTTP or FTP. It also looks after security issues associated with internet communication.
- UI Backend: This component uses the user interface methods of the underlying operating system. It is mainly used for drawing basic widgets (windows and combo boxes).
- Data Storage/Persistence: It is a persistent layer. A web browser needs to store various types of data locally, for example, cookies. As a result, browsers must be compatible with data storage mechanisms such as WebSQL, IndexedDB, FileSystem, etc.
Now that we are aware of the key components involved in building a web browser, let’s dig deep into the role of the rendering engine.
Role of Rendering Engine:
Once a user requests a particular document, the rendering engine starts fetching the content of the requested document. This is done via the networking layer. The rendering engine starts receiving the content of that specific document in chunks of 8 KBs from the networking layer. After this, the basic flow of the rendering engine begins.
The four basic steps include:
- The requested HTML page is parsed in chunks, including the external CSS files and in style elements, by the rendering engine. The HTML elements are then converted into DOM nodes to form a “content tree” or “DOM tree.”
- Simultaneously, the browser also creates a render tree. This tree includes both the styling information as well as the visual instructions that define the order in which the elements will be displayed. The render tree ensures that the content is displayed in the desired order.
- Further, the render tree goes through the layout process. When a render tree is created, the position or size values are not assigned. The entire process of calculating values for evaluating the desired position is called a layout process. In this process, every node is assigned the exact coordinates. This ensures that every node appears at an accurate position on the screen.
- The final step is to paint the screen, wherein the render tree is traversed, and the renderer’s paint() method is invoked, which paints each node on the screen using the UI backend layer.
As discussed earlier, every browser has its own unique rendering engine. So naturally, every browser has its own way of interpreting web pages on a user’s screen. Here’s where a challenge arises for web developers regarding the cross-browser compatibility of their website.
This is where cross-browser testing comes into the picture.
Cross browser testing is a quality assurance method used to verify the consistency of web applications in terms of functionality and design across multiple browsers. These tests enable QA teams to explore any issues by conducting a responsive test, that may occur when their website is accessed via different browsers or browser versions.
Organizations and teams can leverage online platforms like BrowserStack for performing cross browser compatibility testing across a wide range of real browsers and devices. For example, one can perform Edge Testing on Windows 10 to ensure that their web-app performs flawlessly on Microsoft Edge.
By understanding how a rendering engine works, web developers can gain greater insight into how websites operate. Consequently, they can develop, design and deploy content more efficiently. If one comprehends the nuance of how web content is displayed on a user’s screen by various browsers, one is simply more equipped to create content that is compatible with multiple browsers.