Performance Theoretical 4 - CPU

CPU Performance Analysis

This demo helps you understand CPU performance profiling using Chrome DevTools:

Open Chrome DevTools (F12)
Go to the Performance tab
Click the record button (or press Ctrl+E)
Click "Run CPU Intensive Task"
Stop recording after a few seconds
Observe the flame chart and CPU utilization

Compare the results with the "Run Simple Task" to see the difference in CPU usage patterns.

Tips:

Look at the Interactions section to find the function execution
Check the Flame Graph for CPU usage over time
Use the search option Ctrl+F and search for "click"
Check the Call Tree for function call hierarchy
Use the Stack Chart to visualize CPU usage over time

Flame Chart Colors

The flame chart in the Performance panel uses different colors to represent different types of activities:

Grey - Task (main thread work)
Yellow - JavaScript execution
Blue - Rendering events (Layout, Style)
Purple - Painting and compositing
Green - System events (GPU, IPC)
Orange/Red - Long tasks (potentially problematic)
Pink - Loading events

The height of each bar in the flame chart represents call stack depth, while the width shows how long that particular function took to execute.

⚠️ Warning: Dad joke ahead!

Why did the CPU break up with the GPU?

Because it couldn't handle the load! 🐱‍💻