Rendering Performance

Introduction

The Critical Rendering Path is just the steps that browsers take to convert the HTML, CSS, and JavaScript into what a web page looks like. The browser won’t always necessarily touch every part of the pipeline on every frame. Visual changes are made with JavaScript, CSS, or Web Animations. There are three ways the pipeline normally plays out for a given frame when you make a visual change.

1. JS > Style > Layout > Paint > Composite

If you change a “layout” property, which is a property that changes an element’s geometry—like its width, height, or its position at the left or top—the browser will have to check all the other elements and “reflow” the page. Any affected areas will need to be repainted, and the final painted elements will need to be composited back together.

So, to avoid expensive browser reflows, it is best not to make changes that affect the layout of a page.