Frame Performance Testing

Learn how different operations affect frame rate. A smooth animation matches your display's refresh rate — currently detecting… FPS (… ms per frame). When work exceeds that budget, the browser drops frames and the UI janks.

Step 1 — Setup

1. Open DevTools (F12) → Performance tab.
2. Enable the "Screenshots" checkbox at the top.
3. Enable CPU throttling (⚙️ gear → 4× slowdown) to make bottlenecks more visible.

Step 2 — Record & Interact

1. Click Record, then try each action one at a time:
   • Animation Speed slider — drag from low to high.
   • Start Stress Test — let it run ~5 seconds, then stop it.
   • Enable Heavy Animation — toggle on for ~3 seconds, then off.
2. Click Stop to end the recording.

Step 3 — Analyze

In the recorded timeline, look for:

• Frames row — red triangles = dropped frames; even green bars = healthy.
• Flame chart — long yellow blocks are Long Tasks blocking the main thread.
• Screenshots filmstrip — see how the UI looked at each moment.
• Call Tree tab (bottom panel) — sort by Total Time to find the costliest functions.
• Summary tab — see the time split between Scripting, Rendering, and Painting.

Step 4 — Reflect

• Which action caused the biggest FPS drop?
• What's the difference between a scripting bottleneck (stress test) and a rendering bottleneck (heavy animation)?