Performance Rules — Windsurf (Javascript)

# Performance Rules — Windsurf (Javascript)

# Performance Optimization Rules for AI Coding Assistants

When generating code, always consider performance implications:

## Frontend Performance
- Lazy load routes and heavy components (React.lazy, dynamic imports)
- Virtualize long lists — never render 1000+ items in the DOM
- Debounce search inputs and resize handlers (300ms)
- Avoid layout thrashing — batch DOM reads/writes
- Prefer CSS animations over JS animations (GPU-accelerated)
- Use IntersectionObserver for lazy images/animations
- Cache expensive computations with useMemo (profile first)

## API Performance
- Paginate all list endpoints — default page size 20-50
- Index database columns used in WHERE clauses and JOINs
- N+1 queries: use eager loading, DataLoader, or JOIN queries
- Cache expensive computed results (Redis, in-memory)
- Gzip/Brotli compress API responses
- Use HTTP/2 for multiplexed requests

## Bundle Performance
- Tree-shake — only import what you use (`import { x } from 'lib'` not `import lib from 'lib'`)
- Analyze bundles with webpack-bundle-analyzer or Vite visualizer
- Code split at route boundaries
- Preload critical resources

## Database Performance
- EXPLAIN ANALYZE for slow queries
- Connection pooling — never create a connection per request
- Read replicas for read-heavy workloads
- Appropriate data types — don't use varchar(max) for fixed-length data
- Partial indexes for filtered queries

## Measurement
- Profile before optimizing — no premature optimization
- Use browser DevTools Performance tab
- Lighthouse for web vitals