Performance Profiler

Identify and resolve performance bottlenecks in your code.

When to Use

• Application is slower than expected
• Looking for optimization opportunities
• Memory usage is growing unexpectedly
• Users report slow response times
• Preparing for load testing

Performance Investigation Workflow

┌─────────────────────────────────────────────────────────────┐
│ 1. MEASURE - Baseline current performance                   │
├─────────────────────────────────────────────────────────────┤
│ 2. PROFILE - Identify where time is spent                   │
├─────────────────────────────────────────────────────────────┤
│ 3. ANALYZE - Understand why it's slow                       │
├─────────────────────────────────────────────────────────────┤
│ 4. OPTIMIZE - Make targeted improvements                    │
├─────────────────────────────────────────────────────────────┤
│ 5. VERIFY - Confirm improvement without regression          │
└─────────────────────────────────────────────────────────────┘

Measurement Techniques

Basic Timing

// Simple timing
console.time('operation');
await slowOperation();
console.timeEnd('operation'); // operation: 1234ms

// More precise
const start = performance.now();
await slowOperation();
const duration = performance.now() - start;
console.log(`Took ${duration.toFixed(2)}ms`);

Structured Performance Logging

class PerformanceTracker {
  private marks = new Map<string, number>();

  mark(name: string): void {
    this.marks.set(name, performance.now());
  }

  measure(name: string, startMark: string): number {
    const start = this.marks.get(startMark);
    if (!start) throw new Error(`Mark ${startMark} not found`);

    const duration = performance.now() - start;
    console.log(`[PERF] ${name}: ${duration.toFixed(2)}ms`);
    return duration;
  }
}

// Usage
const perf = new PerformanceTracker();

perf.mark('start');
await fetchData();
perf.measure('fetchData', 'start');

perf.mark('afterFetch');
await processData();
perf.measure('processData', 'afterFetch');

perf.mark('afterProcess');
await saveResults();
perf.measure('saveResults', 'afterProcess');

CPU Profiling

Node.js Profiling

# Generate CPU profile
node --prof app.js
# Process the log
node --prof-process isolate-*.log > processed.txt

# Or use built-in profiler
node --inspect app.js
# Then connect Chrome DevTools to chrome://inspect

Programmatic Profiling

import { Session } from 'inspector';
import { writeFileSync } from 'fs';

async function profileOperation<T>(
  name: string,
  operation: () => Promise<T>
): Promise<T> {
  const session = new Session();
  session.connect();

  session.post('Profiler.enable');
  session.post('Profiler.start');

  const result = await operation();

  const profile = await new Promise<any>((resolve) => {
    session.post('Profiler.stop', (err, { profile }) => {
      resolve(profile);
    });
  });

  writeFileSync(`${name}.cpuprofile`, JSON.stringify(profile));
  session.disconnect();

  return result;
}

// Usage
await profileOperation('data-processing', async () => {
  return processLargeDataset(data);
});
// Open .cpuprofile in Chrome DevTools

Memory Profiling

Heap Snapshots

import v8 from 'v8';
import { writeFileSync } from 'fs';

function takeHeapSnapshot(filename: string): void {
  const snapshot = v8.writeHeapSnapshot();
  console.log(`Heap snapshot written to ${snapshot}`);
}

// Comparative analysis
takeHeapSnapshot('before.heapsnapshot');
await suspectedLeakyOperation();
takeHeapSnapshot('after.heapsnapshot');
// Compare in Chrome DevTools

Memory Usage Tracking

function logMemoryUsage(label: string): void {
  const usage = process.memoryUsage();
  console.log(`[MEMORY] ${label}:`);
  console.log(`  Heap Used: ${(usage.heapUsed / 1024 / 1024).toFixed(2)} MB`);
  console.log(`  Heap Total: ${(usage.heapTotal / 1024 / 1024).toFixed(2)} MB`);
  console.log(`  RSS: ${(usage.rss / 1024 / 1024).toFixed(2)} MB`);
}

// Monitor over time
setInterval(() => logMemoryUsage('periodic'), 5000);

Common Bottlenecks

1. N+1 Queries

// BAD: N+1 queries
async function getUsersWithPosts() {
  const users = await db.query('SELECT * FROM users');  // 1 query

  for (const user of users) {
    // N queries (one per user!)
    user.posts = await db.query('SELECT * FROM posts WHERE user_id = ?', [user.id]);
  }

  return users;
}

// GOOD: Single query with join
async function getUsersWithPostsOptimized() {
  return db.query(`
    SELECT u.*, p.*
    FROM users u
    LEFT JOIN posts p ON p.user_id = u.id
  `);
}

// GOOD: Batch query
async function getUsersWithPostsBatch() {
  const users = await db.query('SELECT * FROM users');
  const userIds = users.map(u => u.id);

  const posts = await db.query(
    'SELECT * FROM posts WHERE user_id IN (?)',
    [userIds]
  );

  const postsByUser = groupBy(posts, 'user_id');
  return users.map(u => ({ ...u, posts: postsByUser[u.id] || [] }));
}

2. Synchronous Operations

// BAD: Blocking the event loop
function processLargeFile(path: string) {
  const content = fs.readFileSync(path);  // Blocks!
  return JSON.parse(content);
}

// GOOD: Async
async function processLargeFileAsync(path: string) {
  const content = await fs.promises.readFile(path);
  return JSON.parse(content);
}

// GOOD: Streaming for very large files
async function* processLargeFileStream(path: string) {
  const stream = fs.createReadStream(path);
  for await (const chunk of stream) {
    yield processChunk(chunk);
  }
}

3. Unnecessary Computation

// BAD: Recalculating on every render
function Component({ items }) {
  // Runs on EVERY render
  const sorted = items.sort((a, b) => a.name.localeCompare(b.name));
  const filtered = sorted.filter(i => i.active);

  return <List items={filtered} />;
}

// GOOD: Memoized
function ComponentOptimized({ items }) {
  const processedItems = useMemo(() => {
    return items
      .filter(i => i.active)
      .sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);

  return <List items={processedItems} />;
}

4. Memory Leaks

// BAD: Event listener leak
function setupHandler() {
  window.addEventListener('resize', handleResize);
  // Never removed!
}

// GOOD: Cleanup
function setupHandlerWithCleanup() {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}

// React effect with cleanup
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

5. Large Bundle Size

# Analyze bundle
npx webpack-bundle-analyzer stats.json

# Or for Vite
npx vite-bundle-visualizer

// BAD: Import entire library
import _ from 'lodash';
const result = _.pick(obj, ['a', 'b']);

// GOOD: Import specific function
import pick from 'lodash/pick';
const result = pick(obj, ['a', 'b']);

// BETTER: Use native
const result = { a: obj.a, b: obj.b };

Optimization Strategies

Caching

const cache = new Map<string, { data: any; expires: number }>();

async function cachedFetch<T>(
  key: string,
  fetcher: () => Promise<T>,
  ttlMs: number = 60000
): Promise<T> {
  const cached = cache.get(key);

  if (cached && cached.expires > Date.now()) {
    return cached.data;
  }

  const data = await fetcher();
  cache.set(key, { data, expires: Date.now() + ttlMs });
  return data;
}

Batching

class RequestBatcher<T> {
  private pending = new Map<string, Promise<T>>();
  private batch: string[] = [];
  private timeout: NodeJS.Timeout | null = null;

  async get(id: string): Promise<T> {
    if (this.pending.has(id)) {
      return this.pending.get(id)!;
    }

    const promise = new Promise<T>((resolve) => {
      this.batch.push(id);

      if (!this.timeout) {
        this.timeout = setTimeout(() => this.flush(), 10);
      }
    });

    this.pending.set(id, promise);
    return promise;
  }

  private async flush(): Promise<void> {
    const ids = [...this.batch];
    this.batch = [];
    this.timeout = null;

    const results = await this.batchFetch(ids);
    // Resolve all pending promises
  }
}

Lazy Loading

// React lazy loading
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

Performance Checklist

• Measure before optimizing
• Profile to find actual bottlenecks
• Check for N+1 queries
• Review async operations
• Look for memory leaks
• Analyze bundle size
• Consider caching opportunities
• Test with realistic data volumes
• Verify improvement with benchmarks