Performance Hands-On 16 - Tree
Performance Tool Hands-On
Instructions
- Open DevTools (F12 or Ctrl+Shift+I / Cmd+Option+I)
- Go to the Performance tab
- Click "Record" and then click "Run BFS" button
- Wait for the animation to complete, then stop recording
- Examine the flame chart to see the BFS call stack pattern
- Repeat the process with "Run DFS" button
- Compare the flame charts: notice how BFS processes nodes level by level, while DFS explores each branch
fully before moving to siblings
Tips
- Look for the yellow "processNode" blocks in the flame chart
- Hover over function calls to see their duration
- Use WASD keys to navigate the flame chart (zoom in/out, move left/right)
- Try to identify which traversal method might be more efficient for different scenarios
- Click on some of the functions, and see the next execution function connected with an arrow