Frontend runtime optimization is heavily impacted by rendering.  Understanding the way the JS engine and the browser work is crucial for optimizing applications and understading how to avoid performance pitfalls.
This collection explains about the Critical Rendering Path, performance bottlenecks and practical solutions.

The Critical Rendering Path is what happens from the moment your javascript is running to the moment something changes on screen. In this lesson, we will see how to monitor and view the critical rendering path in the browser.

See the Critical Rendering Path in the browser

Layout reflow can be a performance bottleneck. Let's see how to identify it in the browser and what causes the reflow.

Layout Reflow in the Browser

Layout reflow can be a performance bottleneck. In this lesson, we will learn two ways to solve it.

Solving layout reflow

Layout thrashing is when we force the browser to measure the DOM multiple times during a synchronous process. This can have major performance consequences.  In this lesson we will see the case in which measuring a static value from the DOM can cause layout thrashing - and it can be solved by caching the value.

Solving layout thrashing by caching measured value

Layout thrashing happens when we force the browser to measure the DOM multiple times during a synchronous process. This can have major performance consequences.  In this lesson we will see the case in which measuring a dynamic value from the DOM can cause layout thrashing - and it can be solved by debouncing the measuring function.

Critical Rendering Path

Instructor

Course Content