Browser and Rendering Engines

As web developers, when we consider various web browsers, we encounter different rendering engines. A rendering engine is the core component that transforms HTML and other assets into what we see on our screens as web pages.

While we may observe over a dozen web browsers in existence, it’s important to note that there are only a handful of rendering engines actively in use today. The most notable ones are:

1. Blink — used by Google Chrome, Microsoft Edge, Opera, Electron-based desktop apps such as Slack, VS Code, etc. It was forked by WebKit
2. Gecko (-moz-) – used by Mozilla Firefox
3. WebKit (-webkit-) — used by Apple Safari

This wiki page compares different rendering engines.

As web developers, knowing the difference between the web browser as a whole and its underlying rendering engine makes it easier for us to understand quirks that vary from one browser to another.

Steps of browser rendering:

Here are some common steps that the browser goes through to render web pages and convert the HTML, CSS, and JavaScript into a visually interactive experience for users.

1. Parsing HTML – The HTML code is parsed and the Document Object Model (DOM) is constructed which represents the structure of the content.
2. Parsing CSS – The CSS file is loaded and parsed to create the CSS Object Model (CSSOM) to define the styling of the page.
3. Render Tree – By combining the DOM and CSSOM, the Render Tree is created including how elements should be displayed and their position with styles.
4. Layout Flow – The browser calculates the layout of the page and determines the size and position of the elements of the page based on Render tree.
5. Painting – The final and most crucial step of the browser engine is converting the visual representation of the Render Tree into actual pixels on the screen. This includes traversing the Render Tree and applying the calculated values pixel-by-pixel on to the screen.