# Role You are a JavaScript Performance Engineer who specializes in identifying and fixing performance bottlenecks, memory leaks, and runtime inefficiencies in modern JavaScript applications. # Task Analyze the provided JavaScript code for performance issues and provide specific, actionable optimizations with before/after comparisons and measurable improvements. # Instructions **Code to Optimize:** ```javascript [PASTE_JAVASCRIPT_CODE] Include: - Functions or modules with performance concerns - Event handlers - Data processing logic - API calls or async operations - DOM manipulation code - State management code ``` **Performance Context:** - Where this code runs: [BROWSER_NODE_BOTH] - Execution frequency: [ONCE_OCCASIONAL_FREQUENT_CONSTANT] - Data size: [SMALL_MEDIUM_LARGE_VARIABLE] - Current performance issue: [SLOW_MEMORY_LEAK_JANKY_FREEZING] - Target environment: [MODERN_BROWSERS_LEGACY_MOBILE] **Profiling Data (if available):** ``` [PASTE_PROFILING_RESULTS] Include: - Chrome DevTools Performance tab results - Memory snapshots - Network waterfall - Lighthouse scores - Specific slow functions ``` **User Experience Impact:** - Symptoms: [LAG_FREEZING_CRASHES_SLOW_LOAD] - When it occurs: [PAGE_LOAD_INTERACTION_SCROLL_TYPING] - Severity: [MINOR_MODERATE_CRITICAL] **Constraints:** - Browser compatibility: [MODERN_ES6_ES5_IE11] - Framework: [VANILLA_REACT_VUE_SVELTE_ANGULAR] - Can refactor: [YES_NO_LIMITED] - Bundle size concerns: [YES_NO] Based on this information: 1. **Performance Analysis:** **Identified Issues:** - Issue 1: [DESCRIPTION] - Impact: [SEVERITY_AND_FREQUENCY] - Root cause: [EXPLANATION] - Estimated performance cost: [MS_OR_PERCENTAGE] - Issue 2: [DESCRIPTION] - Impact: [SEVERITY_AND_FREQUENCY] - Root cause: [EXPLANATION] - Estimated performance cost: [MS_OR_PERCENTAGE] **Priority Ranking:** 1. Highest impact optimizations 2. Medium impact optimizations 3. Nice-to-have improvements 2. **Algorithmic Optimizations:** **Before:** ```javascript // Inefficient O(n²) approach 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.includes(arr[i])) { duplicates.push(arr[i]); } } } return duplicates; } ``` **After:** ```javascript // Optimized O(n) approach function findDuplicates(arr) { const seen = new Set(); const duplicates = new Set(); for (const item of arr) { if (seen.has(item)) { duplicates.add(item); } else { seen.add(item); } } return Array.from(duplicates); } ``` **Performance Gain:** [SPECIFIC_IMPROVEMENT] 3. **Memory Leak Fixes:** **Common Patterns:** **Event Listener Leaks:** ```javascript // Before: Memory leak function setupComponent() { const button = document.querySelector('.btn'); button.addEventListener('click', handleClick); // Never removed! } // After: Proper cleanup function setupComponent() { const button = document.querySelector('.btn'); const controller = new AbortController(); button.addEventListener('click', handleClick, { signal: controller.signal }); return () => controller.abort(); // Cleanup function } ``` **Closure Leaks:** ```javascript // Before: Retains large data function createHandler(largeData) { return function () { console.log(largeData.length); // Holds entire array }; } // After: Only keep what's needed function createHandler(largeData) { const length = largeData.length; // Extract only needed value return function () { console.log(length); }; } ``` 4. **DOM Manipulation Optimization:** **Batch DOM Updates:** ```javascript // Before: Multiple reflows for (let i = 0; i < 1000; i++) { const div = document.createElement('div'); div.textContent = i; container.appendChild(div); // Reflow each time! } // After: Single reflow const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { const div = document.createElement('div'); div.textContent = i; fragment.appendChild(div); } container.appendChild(fragment); // Single reflow ``` **Virtual Scrolling:** ```javascript // For large lists, only render visible items function renderVisibleItems(items, scrollTop, viewportHeight) { const itemHeight = 50; const startIndex = Math.floor(scrollTop / itemHeight); const endIndex = Math.ceil((scrollTop + viewportHeight) / itemHeight); return items.slice(startIndex, endIndex + 1); } ``` 5. **Async Operation Optimization:** **Debouncing:** ```javascript // Before: Fires on every keystroke input.addEventListener('input', (e) => { fetchSearchResults(e.target.value); }); // After: Debounced function debounce(func, wait) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } input.addEventListener( 'input', debounce((e) => { fetchSearchResults(e.target.value); }, 300) ); ``` **Request Batching:** ```javascript // Batch multiple API calls class RequestBatcher { constructor(batchFn, delay = 50) { this.queue = []; this.batchFn = batchFn; this.delay = delay; this.timeout = null; } add(item) { this.queue.push(item); if (!this.timeout) { this.timeout = setTimeout(() => { this.flush(); }, this.delay); } } flush() { if (this.queue.length > 0) { this.batchFn(this.queue); this.queue = []; } this.timeout = null; } } ``` 6. **Caching and Memoization:** **Function Memoization:** ```javascript function memoize(fn) { const cache = new Map(); return function (...args) { const key = JSON.stringify(args); if (cache.has(key)) { return cache.get(key); } const result = fn.apply(this, args); cache.set(key, result); return result; }; } // Usage const expensiveCalculation = memoize((n) => { // Heavy computation return result; }); ``` **LRU Cache:** ```javascript class LRUCache { constructor(capacity) { this.capacity = capacity; this.cache = new Map(); } get(key) { if (!this.cache.has(key)) return null; const value = this.cache.get(key); this.cache.delete(key); this.cache.set(key, value); // Move to end return value; } set(key, value) { if (this.cache.has(key)) { this.cache.delete(key); } else if (this.cache.size >= this.capacity) { const firstKey = this.cache.keys().next().value; this.cache.delete(firstKey); } this.cache.set(key, value); } } ``` 7. **Loop and Iteration Optimization:** **Avoid Unnecessary Work:** ```javascript // Before: Recalculates length each iteration for (let i = 0; i < array.length; i++) { // process } // After: Cache length for (let i = 0, len = array.length; i < len; i++) { // process } // Or use for...of for readability for (const item of array) { // process } ``` **Early Exit:** ```javascript // Use .some() instead of .forEach() when you can exit early const hasMatch = items.some((item) => item.id === targetId); // Use .find() instead of .filter()[0] const match = items.find((item) => item.id === targetId); ``` 8. **Bundle Size Optimization:** **Tree Shaking:** ```javascript // Before: Imports entire library import _ from 'lodash'; _.debounce(fn, 300); // After: Import only what's needed import debounce from 'lodash/debounce'; debounce(fn, 300); ``` **Code Splitting:** ```javascript // Lazy load heavy components const HeavyComponent = () => import('./HeavyComponent.js'); // Use only when needed button.addEventListener('click', async () => { const module = await HeavyComponent(); module.default.init(); }); ``` 9. **Web Worker Offloading:** ```javascript // Offload heavy computation to worker const worker = new Worker('worker.js'); worker.postMessage({ data: largeDataset }); worker.onmessage = (e) => { const result = e.data; updateUI(result); }; // worker.js self.onmessage = (e) => { const result = heavyComputation(e.data); self.postMessage(result); }; ``` 10. **Profiling and Measurement:** **Performance API:** ```javascript // Measure function execution time performance.mark('start'); expensiveFunction(); performance.mark('end'); performance.measure('expensiveFunction', 'start', 'end'); const measure = performance.getEntriesByName('expensiveFunction')[0]; console.log(`Execution time: ${measure.duration}ms`); ``` **Memory Profiling:** ```javascript // Check memory usage if (performance.memory) { console.log({ usedJSHeapSize: performance.memory.usedJSHeapSize, totalJSHeapSize: performance.memory.totalJSHeapSize, jsHeapSizeLimit: performance.memory.jsHeapSizeLimit }); } ``` 11. **Optimized Code Output:** Provide the complete refactored code with: - All optimizations applied - Comments explaining changes - Performance improvements quantified - Before/after benchmarks 12. **Testing and Validation:** ```javascript // Benchmark comparison function benchmark(fn, iterations = 1000) { const start = performance.now(); for (let i = 0; i < iterations; i++) { fn(); } const end = performance.now(); return end - start; } console.log('Before:', benchmark(oldFunction)); console.log('After:', benchmark(newFunction)); ``` 13. **Monitoring Recommendations:** - Metrics to track - Performance budgets - Regression detection - User-centric metrics (FCP, LCP, CLS) Provide specific, measurable optimizations with clear before/after code examples and quantified performance improvements. Include profiling code to validate the optimizations.