Back to results for “Debugging”
JavaScript › Debugging, Testing & Tooling

How does the Performance panel in DevTools help diagnose a janky UI?

Advanced

Answer

Recording a performance profile captures a timeline of scripting, rendering, painting, and layout work, letting you spot long-running JavaScript tasks, layout thrashing, or excessive re-renders that block the main thread and cause dropped frames.
// Programmatically mark points to correlate with the profile:
performance.mark('start-render');
renderList(items);
performance.mark('end-render');
performance.measure('render', 'start-render', 'end-render');
Real-world example Diagnosing why scrolling a long list feels janky, by finding a synchronous layout-forcing function in the flame chart.

Common follow-ups: What's the difference between 'Scripting' and 'Rendering' time in the profiler?