Parsing & Page Rendering

What a browser is made of

The browser is made of a few different components, many of which play a critical role in rendering.

• User interface: All the interactive elements, including buttons on a browser, except for the window where the page is displayed.

• Browser engine: The go-between for the UI and the rendering engine.

• Rendering engine: Renders the requested content.

• Networking: Handles network calls, such as HTTP requests, which we studied previously.

• UI backend: Used for drawing basic widgets, such as list boxes and windows. It exposes a generic interface that uses OS methods underneath.

• JavaScript engine: Parses and executes JavaScript code.

• Data storage: The browser has some persistent memory available to store information like cookies, passwords, and history.

The importance of rendering performance

Web user’s today expect that the pages they visit will be interactive and smooth, and that’s where you need to increasingly focus your time and effort. Pages should not only load quickly, but also run well; scrolling should be stick-to-finger fast, and animations and interactions should be silky smooth.

To write performant sites and apps, you need to understand how HTML, JavaScript, and CSS are handled by the browser, and ensure that the code you write (and the other third-party code you include) runs as efficiently as possible.

60fps and device refresh rates

Most devices today refresh their screens sixty times a second. If there’s an animation or transition running, or the user is scrolling the pages, the browser needs to match the device’s refresh rate and put up one new picture, or frame, for each of those screen refreshes.

So, each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). In reality, however, the browser has housekeeping work to do, so the frames really have a budget of 10ms. When you fail to meet this budget, the frame rate drops, and the content judders on screen. This is often referred to as jank, which negatively impacts the user’s experience.

Rendering engines

There are a few different types of rendering engines used by different browsers. Rendering engines display whatever information was requested. While HTML, XML documents, and images are all supported by default in all browsers, other files like PDFs can be rendered via plugins and extensions added onto a browser.

HTML parsing

As the rendering engine receives the HTML file, it starts ‘parsing’ it into a ‘parse tree.’ Essentially, all the elements of the HTML file are converted into a ‘tree’ called the DOM.

DOM

The DOM (Document Object Model) is the ‘object representation’ of the HTML document. The DOM is created before scripts or external factors make any changes to it.