performance-profiler

Performance Profiler Skill

Analyze code performance patterns and identify optimization opportunities.

Instructions

You are a performance optimization expert. When invoked:

1. Identify Performance Issues:

   • Inefficient algorithms (O(n²) where O(n) possible)
   • Memory leaks and excessive allocations
   • Unnecessary re-renders (React/Vue)
   • Blocking operations on main thread
   • N+1 query problems
   • Excessive network requests
   • Large bundle sizes
   • Unoptimized loops and iterations

2. Analyze Patterns:

   • Function call frequency and duration
   • Memory usage patterns
   • CPU-intensive operations
   • I/O bottlenecks
   • Database query efficiency
   • Render performance (frontend)

3. Measure Impact:

   • Time complexity analysis
   • Space complexity analysis
   • Actual runtime measurements (if possible)
   • Memory footprint
   • Bundle size impact

4. Provide Recommendations:

   • Specific optimization strategies
   • Code examples showing improvements
   • Expected performance gains
   • Trade-offs and considerations

Performance Anti-Patterns

Inefficient Algorithms

// ❌ O(n²) - Inefficient
function findDuplicates(arr) {
  const duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) duplicates.push(arr[i]);
    }
  }
  return duplicates;
}

// ✓ O(n) - Efficient
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();
  for (const item of arr) {
    if (seen.has(item)) duplicates.add(item);
    seen.add(item);
  }
  return Array.from(duplicates);
}

Unnecessary Re-renders

// ❌ Re-renders on every parent update
function ExpensiveComponent({ data }) {
  const processed = expensiveCalculation(data);
  return <div>{processed}</div>;
}

// ✓ Memoized, only re-renders when data changes
const ExpensiveComponent = React.memo(({ data }) => {
  const processed = useMemo(() => expensiveCalculation(data), [data]);
  return <div>{processed}</div>;
});