🔎 How to Use Performance DevTools
- Open DevTools: Press F12 or right-click and select "Inspect"
- Go to Performance tab: Find it in the DevTools top navigation
- Record: Click the ⚫ record button (or Ctrl+E)
- Run an example: Click one of the example buttons below
- Stop recording: Click the ⏹️ stop button
- Analyze: Look at flame charts, summary, and bottlenecks
1️⃣ DOM Creation Performance
What to look for: Long tasks in the Main thread, scripting time vs. rendering time
2️⃣ CPU-Heavy Animation
🌀
What to look for: Frame rate drops, long task markers, jank in the animation
3️⃣ Network Performance
What to look for: Network activity, loading times, resource waterfall
4️⃣ Memory Leaks
What to look for: Memory graph increasing, heap snapshots showing retained objects
Tip: Switch to the Memory tab to take heap snapshots
5️⃣ Animation Performance
What to look for: Continuous DOM updates, paint and composite operations
6️⃣ Main Thread Blocking
What to look for: Long-running JavaScript, UI freezing, call stack depth
7️⃣ Layout Thrashing
What to look for: Forced reflow warnings, layout recalculations
8️⃣ Event Loop Congestion
What to look for: Task scheduling, timers, event handling in flame chart
🔍 Performance Analysis Tips:
- Red triangles in flame charts indicate performance problems
- Use the Summary tab to see where time is spent (Scripting, Rendering, etc.)
- Look for long tasks (over 50ms) that might cause jank
- Check FPS meter to identify frame rate drops
- Use Screenshots option to correlate visual changes with performance data