Initial commit

skills/performance-optimization/reference/profiling-tools.md

@@ -0,0 +1,158 @@
+# Profiling Tools Reference
+
+Tools and techniques for identifying performance bottlenecks across the stack.
+
+## Chrome DevTools
+
+### Performance Panel
+```javascript
+// Mark performance measurements
+performance.mark('start-expensive-operation');
+// ... expensive operation ...
+performance.mark('end-expensive-operation');
+performance.measure(
+  'expensive-operation',
+  'start-expensive-operation',
+  'end-expensive-operation'
+);
+```
+
+**Use for**: FPS analysis, JavaScript profiling, paint events, network waterfall
+
+---
+
+### Memory Panel
+- **Heap Snapshot**: Take snapshot, compare for memory leaks
+- **Allocation Timeline**: See memory allocation over time
+- **Allocation Sampling**: Low-overhead profiling
+
+**Use for**: Memory leak detection, heap size analysis
+
+---
+
+## Node.js Profiling
+
+### Built-in Inspector
+```bash
+# Start with inspector
+node --inspect server.js
+
+# Open chrome://inspect in Chrome
+# Click "inspect" to open DevTools
+```
+
+### clinic.js
+```bash
+# Install
+npm install -g clinic
+
+# Doctor: Overall health check
+clinic doctor -- node server.js
+
+# Flame: CPU profiling
+clinic flame -- node server.js
+
+# Bubbleprof: Async operations
+clinic bubbleprof -- node server.js
+```
+
+---
+
+## React DevTools Profiler
+
+```jsx
+import { Profiler } from 'react';
+
+function onRenderCallback(
+  id, phase, actualDuration, baseDuration, startTime, commitTime
+) {
+  console.log(`${id} took ${actualDuration}ms to render`);
+}
+
+<Profiler id="App" onRender={onRenderCallback}>
+  <App />
+</Profiler>
+```
+
+**Metrics**:
+- **Actual Duration**: Time to render committed update
+- **Base Duration**: Estimated time without memoization
+- **Start Time**: When React began rendering
+- **Commit Time**: When React committed the update
+
+---
+
+## Database Profiling
+
+### PostgreSQL EXPLAIN ANALYZE
+```sql
+EXPLAIN ANALYZE
+SELECT * FROM orders
+WHERE customer_id = '123'
+  AND status = 'pending';
+
+-- Output shows:
+-- - Execution time
+-- - Rows scanned
+-- - Index usage
+-- - Cost estimates
+```
+
+### pg_stat_statements
+```sql
+-- Enable extension
+CREATE EXTENSION pg_stat_statements;
+
+-- View top slow queries
+SELECT 
+  query,
+  mean_exec_time,
+  calls,
+  total_exec_time
+FROM pg_stat_statements
+ORDER BY mean_exec_time DESC
+LIMIT 10;
+```
+
+---
+
+## APM Tools
+
+### DataDog
+```javascript
+const tracer = require('dd-trace').init();
+
+tracer.trace('expensive-operation', () => {
+  // Your code here
+});
+```
+
+### Sentry Performance
+```javascript
+import * as Sentry from '@sentry/node';
+
+const transaction = Sentry.startTransaction({
+  op: 'task',
+  name: 'Process Order'
+});
+
+// ... do work ...
+
+transaction.finish();
+```
+
+---
+
+## Summary
+
+| Tool | Use Case | Best For |
+|------|----------|----------|
+| **Chrome DevTools** | Frontend profiling | JavaScript, rendering, network |
+| **clinic.js** | Node.js profiling | CPU, async, I/O |
+| **React Profiler** | Component profiling | React performance |
+| **EXPLAIN ANALYZE** | Query profiling | Database optimization |
+| **APM Tools** | Production monitoring | Distributed tracing |
+
+---
+
+**Previous**: [Performance Metrics](performance-metrics.md) | **Next**: [Optimization Patterns](optimization-patterns.md) | **Index**: [Reference Index](INDEX.md)