Performance Patterns

Progressive Loading Stages

Stage 1: Metadata

• Skill: Performance Patterns
• Purpose: Identify performance bottlenecks and optimization opportunities
• When: Performance analysis, code review, optimization tasks
• Core Rule: Measure first, optimize second (no premature optimization)
• Sections Available: N+1 Queries, Big O Complexity, Memory Leaks, Caching, Quick Checks

Stage 2: Quick Reference

Performance Quick Checks

Performance Checklist:
- [ ] Database: N+1 queries eliminated?
- [ ] Algorithms: O(n) loops avoided?
- [ ] Frontend: React memoization used?
- [ ] Memory: Intervals/listeners cleaned up?
- [ ] Bundle: Code splitting implemented?
- [ ] Caching: Expensive calculations memoized?

Critical Anti-Patterns

N+1 Query Problem:

// N+1: 1 + N queries
const orders = await db.query('SELECT * FROM orders');
for (const order of orders) {
  order.customer = await db.query('SELECT * FROM customers WHERE id = $1', [order.customer_id]);
}

// Single JOIN query
const orders = await db.query(`
  SELECT orders.*, customers.*
  FROM orders
  LEFT JOIN customers ON orders.customer_id = customers.id
`);

O(n) Nested Loops:

// O(n) complexity
for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr.length; j++) {
    if (arr[i] === arr[j] && i !== j) duplicates.push(arr[i]);
  }
}

// O(n) with Set
const seen = new Set();
const duplicates = new Set();
for (const item of arr) {
  if (seen.has(item)) duplicates.add(item);
  seen.add(item);
}

Unnecessary Re-renders (React):

// New function every render
function UserList({ users }) {
  const handleClick = (id) => console.log(id); // New function!
  return users.map(u => <User onClick={handleClick} />);
}

// Memoized callback
const UserList = memo(function UserList({ users }) {
  const handleClick = useCallback((id) => console.log(id), []);
  return users.map(u => <User onClick={handleClick} />);
});

Quick Detection Commands

# Find N+1 candidates
grep -rn "for.*of\|forEach" src/ -A 3 | grep -i "query\|find"

# Find O(n) nested loops
grep -rn "for.*for" src/ --include="*.ts"

# Find memory leak candidates
grep -rn "setInterval\|addEventListener" src/ --include="*.ts"

# Check bundle size
npm run build -- --stats

Stage 3: Detailed Guide

For the full detailed guidance, see reference/performance-detailed.md.

References

• Web Vitals
• React Performance Optimization
• Database Performance Explained
• Big O Cheat Sheet

Remember: Premature optimization is the root of all evil - profile first, optimize second!