Performance Tools: Call Stack Analysis
Exercise 1: Understanding Call Stack Limits
The browser's Performance panel can help analyze stack overflows and recursive function performance.
- Open DevTools (F12 or right-click and select "Inspect")
- Go to the Performance tab
- Click the record button (⚫)
- Click the button below to trigger a recursive loop
- Stop recording once the error appears
- Analyze the call stack in the flame chart
Exercise 2: Optimizing Recursion
Let's see how setTimeout affects our recursive function in the Performance panel:
- Start a new recording in the Performance tab
- Click the button below to run the delayed version
- Observe how the call stack appears different in the flame chart
- Notice how setTimeout creates separate "tasks" instead of a continuous stack
Exercise 3: CPU Profiling
The Performance panel can also show CPU usage patterns:
- Start a new recording with "CPU profile" checked
- Click the button below to run a CPU-intensive operation
- Look at the CPU chart in the timeline view
- Explore the "Bottom-Up" and "Call Tree" tabs to find performance bottlenecks
Performance Panel Tips
- Flame Chart: Shows function call stacks - taller stacks indicate deeper recursion
- Summary: Check the pie chart to see where time is spent (Loading, Scripting, Rendering)
- Bottom-Up: Shows which functions took the most time overall
- Call Tree: Shows the full calling structure of your code
- Event Log: Lists each browser event chronologically
Hint: When analyzing performance, look for "long tasks" (colored red in the timeline) that may be causing jank. Also, compare the call stack height between the regular recursion and setTimeout versions to understand how event loop and task queuing work in JavaScript.