Performance Hands-On 4 - CPU Profiling

Back

Understanding CPU Performance in the Browser

In this hands-on exercise, you'll learn how to:

Core Web Vitals — Before You Record

  1. Open DevTools (F12) → Performance tab.
  2. Enable "Core Web Vitals" in the settings (gear icon).
  3. Press Ctrl+Shift+E to reload-profile the page.
  4. Check the timeline for LCP, CLS, and INP markers.

INP Demo

Each click blocks the main thread longer, increasing INP. Check the Interactions lane.

Clicks: 0  |  Last blocking time: — ms

CLS Demo

This page intentionally injects several large blocks after load, causing multiple layout shifts. Look for them in the Experience lane.

This text gets pushed down repeatedly — watch it jump!

Interactive Demos

Basic CPU Tasks

Task: Start recording, click Simple Task first, then click CPU Intensive Task, then stop recording. Compare both in the flamechart — find the bottleneck in the intensive task.

Function Call Patterns

Task: Record Sequential Tasks — spot functions a(), b(), c() in the flamechart. Then record Recursive Task — notice the deep call stack from Fibonacci. How do the flamechart shapes differ? Use the Bottom-Up and Call Tree views to see which functions use the most CPU.

UI Blocking Demonstration

Task: Record Animation + CPU Load — watch the FPS meter and notice dropped frames caused by JS blocking. Then record Async vs Sync — compare the continuous sync block vs the async gaps that keep the main thread responsive.

Tip: Enable CPU throttling (e.g. 4x, 6× or 20× slowdown) in the Performance panel toolbar to make the effects more visible on fast machines.

Results will appear here

How to Use the Performance Panel

  1. Open DevTools by pressing F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).
  2. Navigate to the Performance tab.
  3. Click the Record button (circle icon) to start profiling.
  4. Click any of the demo buttons above to perform an action.
  5. Click Stop to end the recording.
  6. Analyze the results using the guidance below.

Reading the Performance Panel

Main Sections:

  • Overview: Shows CPU activity, frames per second, and network requests over time.
  • Main Section: Displays flame chart of JavaScript execution, rendering, and painting.
  • Call Tree: Shows which functions consumed the most CPU time (Bottom-Up view).
  • Event Log: Chronological list of events that occurred during recording.

Key Patterns to Look For:

  • Long yellow bars: JavaScript execution blocks that might cause jank.
  • Red frames: Frames that missed the 60fps target (potential user experience issues).
  • Deep call stacks: May indicate complex processing that could be optimized.
  • Repeated patterns: Opportunities for caching or memoization.

Performance Optimization Tips

  • Use async/await or Promises for operations that can run in the background.
  • Break up long-running tasks using setTimeout or requestIdleCallback.
  • Move intensive work to Web Workers to avoid blocking the main thread.
  • Debounce or throttle event handlers that might fire frequently.
  • Memoize expensive calculations to avoid repeating them unnecessarily.
  • Use appropriate data structures for the operations you're performing.

Additional Resources