Performance Hands-On 4 - CPU Profiling

Back

Understanding CPU Performance in the Browser

The Performance panel in DevTools allows you to analyze what's happening when your JavaScript code executes, helping you identify and fix performance bottlenecks that affect user experience.

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

Interactive Demos

Basic CPU Tasks

Function Call Patterns

UI Blocking Demonstration

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.

Hands-On Tasks

  1. Compare the flamecharts between the CPU Intensive Task and Simple Task:
    • What's the difference in execution time?
    • Can you identify which part of the code is causing the performance bottleneck?
  2. Examine the "Run Sequential Tasks" button performance:
    • Notice how functions a(), b(), and c() appear in the flamechart.
    • Consider how these could be optimized (hint: think about asynchronous patterns).
  3. Use the "Bottom-Up" and "Call Tree" views to identify:
    • Which functions consume the most CPU time?
    • What's the relationship between parent and child functions?
  4. During the "Animation + CPU Load" test:
    • Observe the impact on frame rate (FPS meter at the top).
    • Notice how JavaScript execution affects visual updates.

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