Performance Tool Key Features
1. Summary View
The Summary tab provides an overview of where time was spent loading and running the page.
- Shows time spent on Loading, Scripting, Rendering, and Painting
- Displays CPU usage and frames per second (FPS)
Try it: Click Record, use the buttons above, then check how time is distributed in the Summary
panel.
2. Bottom-Up View
Shows functions that took the most time, sorted by "self time" (time spent in the function itself).
- Helps identify functions consuming the most CPU time
- Shows which functions are causing performance bottlenecks
Try it: Click the "Run Heavy Calculation" button, record performance, and check the Bottom-Up
tab.
3. Call Tree View
Shows the calling structure - which functions called other functions and how much time was spent.
- Provides a top-down view of function calls
- Helps understand the execution context of slow functions
Try it: Record while using multiple buttons, then examine the Call Tree to see the call
hierarchy.
4. Event Log View
Chronological list of all recorded events during the performance capture.
- Shows timing of DOM events, timers, network requests, etc.
- Helps identify event sequences that might affect performance
Try it: Record a session with animation and network activity, then review the Events Log.