Why Is Everything Slow?

Sometimes code is correct but slow. The Performance panel in Chrome DevTools is your main diagnostic tool.

What You Can Discover

1. CPU Profile: Which functions consume the most processing time.
2. Layout Shifts (CLS): Why elements jump around during page load.
3. Memory Leaks: Event listeners or closures piling up in memory over time.

Quick Timing with console.time

console.time('data-processing');

const result = processLargeDataset(data); // Time this!

console.timeEnd('data-processing');
// Prints: "data-processing: 234.5ms"

Finding Memory Leaks

// Common memory leak: forgetting to remove event listeners
class Component {
  mount() {
    this.handler = () => this.handleResize();
    window.addEventListener('resize', this.handler);
  }
  
  unmount() {
    window.removeEventListener('resize', this.handler); // Critical!
    // Without this, the handler (and 'this') stays in memory forever
  }
}