Chapter 57: The Critical Rendering Path (CRP)

Measuring Rendering with Chrome DevTools Performance Panel

**Part 12: Performance & Optimization** — Chapter 57: Critical Rendering Path & DOM Optimization

LEARNING OBJECTIVES ⌵
  • Record and analyze runtime performance profiles in Chrome DevTools.
  • Identify Long Tasks (>50ms) marked with red flags.
  • Locate Forced Synchronous Layouts and Layout Thrashing in the flame chart.
  • Inspect Cumulative Layout Shift (CLS) clusters and Paint Flashing overlays.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Performance Profiling Workflow

  1. Open Chrome DevTools $\rightarrow$ Performance tab.
  2. Check Screenshots and select CPU: 4x/6x slowdown (to emulate median mobile hardware).
  3. Click Record, reload the page or interact with UI, and click Stop.
  4. Inspect the Main Thread Flame Chart:
    • 🟥 Red triangles = Long Tasks (>50ms) blocking user input (causing INP failures).
    • 🟪 Purple bars = Layout (Reflow) events.
    • 🟩 Green bars = Paint and Raster events.
Main Thread:
[ Task (82ms) 🟥 ] ==================================> BLOCKS UI!
  [ Parse HTML (12ms) ] [ Recalculate Style (30ms) ] [ Layout (40ms) 🟪 ]

📌 Key Takeaways

  • Enable CPU Slowdown (4x/6x) when recording profiles to expose performance bottlenecks that are masked by fast developer laptops.
  • Eliminate forced reflows by separating DOM reading (offsetHeight, scrollTop) from DOM writing (style.height, classList.add).
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?