Critical Rendering Path & Reflow/Repaint0%
requestAnimationFrame & Smooth Animations

Critical Rendering Path & Reflow/Repaint

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Critical Rendering Path & Reflow/Repaint in Modern JavaScript

Understanding how browsers convert HTML, CSS, and JavaScript into pixels on the display screen is the hallmark of senior frontend engineers. The Critical Rendering Path (CRP) dictates rendering performance, and careless DOM manipulation triggers devastating Reflows (Layout) and Repaints.

1. The 5 Steps of the Critical Rendering Path

Output
1. DOM Construction (HTML ──► DOM Tree)
│
2. CSSOM Construction (CSS ──► CSS Object Model)
│
▼
3. Render Tree (Combines visible DOM nodes with matched CSS rules)
│
▼
4. Layout (Reflow) (Computes exact pixel geometry, coordinates, and size of every box)
│
▼
5. Paint & Composite (Fills pixels on raster layers; GPU composites layers onto screen)

2. Reflow vs. Repaint

OperationTriggered ByCostDescription
Reflow (Layout)Changes affecting geometry, dimensions, or positions (width, height, margin, font-size, adding/removing nodes)Extremely ExpensiveRecomputes layout geometry of target node and all affected ancestors/descendants!
Repaint (Paint)Changes affecting appearance only without changing dimensions (color, background-color, box-shadow, visibility)ModerateRedraws pixels on affected layers without recalculating layout coordinates.
Composite OnlyChanges using transform and opacityCheapest (Ideal)GPU composites layers directly with zero CPU reflow and zero CPU repaint!

3. The Performance Killer: Forced Synchronous Layout (Layout Thrashing)

Normally, browsers batch DOM mutations and execute Reflow asynchronously at the end of the frame. However, if code reads geometric properties immediately after writing styles, the browser is forced to flush layout synchronously:

JavaScript
// DANGER: Layout Thrashing (Forces 100 Reflows in a single frame!)
const cards = document.querySelectorAll('.card');
 
cards.forEach(card => {
// READ: Forces synchronous layout calculation!
const height = card.offsetHeight;
// WRITE: Invalidates layout!
card.style.height = `${height + 10}px`;
});

Properties that Trigger Forced Reflow:

  • element.offsetWidth, offsetHeight, clientWidth, clientHeight
  • element.getBoundingClientRect()
  • window.scrollY, window.getComputedStyle()

The Fix: Batch Reads First, Writes Second

JavaScript
// SAFE: Batch all READS first, then execute all WRITES
const heights = [...cards].map(c => c.offsetHeight); // All Reads batch together
 
cards.forEach((card, i) => {
card.style.height = `${heights[i] + 10}px`; // All Writes batch together!
});

4. Hardware Acceleration with CSS will-change

Promoting an element to its own GPU compositor layer bypasses CPU painting:

CSS
/* Informs browser to promote element to a dedicated GPU layer */
.animated-sidebar {
will-change: transform, opacity;
transform: translate3d(0, 0, 0);
}
Interactive Quiz

Practice Quiz

Question 1
Which step in the Critical Rendering Path computes the exact physical pixel dimensions and screen coordinates of elements?
Question 2
Which pair of CSS properties is processed entirely on the GPU compositor layer, bypassing both Reflow and Repaint?
Question 3
What causes "Forced Synchronous Layout" (Layout Thrashing)?
Question 4
How should a developer restructure code to eliminate layout thrashing?
Question 5
What does the CSS property will-change: transform hint to the browser?
Next Lesson

requestAnimationFrame & Smooth Animations

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Streaming JSON & NDJSONrequestAnimationFrame & Smooth Animations

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext