How to profile JavaScript performance in the browser

· Category: JavaScript

Short answer

Browser DevTools provides the Performance tab for CPU and memory profiling, and the Memory tab for heap snapshots, helping you find slow code and leaks.

Steps

  1. Record a performance profile: - Open DevTools > Performance. - Click Record, perform the action, then Stop. - Analyze the flame chart for long tasks.
  2. Use console.time and console.timeEnd for quick measurements.
  3. Take heap snapshots in the Memory tab before and after an operation.
  4. Use the JavaScript profiler to see per-function CPU time.

Tips

  • Look for forced synchronous layouts (layout thrashing) in the performance chart.
  • Use performance.mark and performance.measure for programmatic timing.

Common issues

  • Profiling adds overhead; results are relative, not absolute.
  • Garbage collection during profiling can skew memory measurements; run multiple times.