Main Flame Chart in Performance Tool
What is the Main Flame Chart?
The Main Flame Chart visualizes what's happening on the main thread of your website. It shows JavaScript execution, rendering, and layout operations in a hierarchical format where:
- Height represents call stack depth
- Width represents execution time
- Colors represent different types of activities (script execution, rendering, etc.)
Hands-On Exercise
- Open the DevTools in your browser (F12 or right-click and select "Inspect").
- Go to the "Performance" tab.
- Click the "Record" button to start recording.
- Click the different buttons below in sequence to generate diverse performance data.
- Click the "Stop" button in DevTools to stop recording.
Analyzing the Main Flame Chart
After recording, look for these key elements:
- Yellow Bars: JavaScript execution
- Purple Bars: Layout operations
- Green Bars: Painting/rendering
- Long, wide bars indicate potential bottlenecks
- Click on individual functions to see their execution time
Practice Tips
- Zoom in on specific sections using the mouse wheel
- Hover over functions to see their names and execution times
- Find the link to the JavaScript file in the flame chart (look for "index.js") and click on it to see how much time each function and line in your code took to execute
- Look for recurring patterns that might indicate inefficient loops
- Compare CPU-intensive tasks with DOM manipulation tasks