JavaScript Performance

Micro-optimizations for high-performance JavaScript.

Instructions

1. Use Set for Lookups

// ❌ Bad - O(n) lookup const ids = [1, 2, 3, 4, 5]; if (ids.includes(targetId)) { ... }

// ✅ Good - O(1) lookup const idSet = new Set([1, 2, 3, 4, 5]); if (idSet.has(targetId)) { ... }

2. Use Map for Key-Value

// ❌ Bad - object for dynamic keys const cache: { [key: string]: Data } = {}; cache[key] = data;

// ✅ Good - Map for dynamic keys const cache = new Map<string, Data>(); cache.set(key, data);

3. Early Returns

// ❌ Bad - nested conditions function process(data) { if (data) { if (data.isValid) { if (data.type === 'user') { return handleUser(data); } } } return null; }

// ✅ Good - early returns function process(data) { if (!data) return null; if (!data.isValid) return null; if (data.type !== 'user') return null; return handleUser(data); }

4. Avoid Creating Arrays

// ❌ Bad - creates intermediate array const result = items.filter(x => x.active).map(x => x.name)[0];

// ✅ Good - find first match const result = items.find(x => x.active)?.name;

5. Batch DOM Updates

// ❌ Bad - multiple reflows items.forEach(item => { const el = document.createElement('div'); el.textContent = item.name; container.appendChild(el); });

// ✅ Good - single reflow const fragment = document.createDocumentFragment(); items.forEach(item => { const el = document.createElement('div'); el.textContent = item.name; fragment.appendChild(el); }); container.appendChild(fragment);

6. Passive Event Listeners

// ✅ Use passive for scroll/touch events element.addEventListener('scroll', handler, { passive: true }); element.addEventListener('touchstart', handler, { passive: true });

7. Caching Expensive Operations

// ✅ Memoization const cache = new Map();

function expensiveCalculation(input: string) { if (cache.has(input)) { return cache.get(input); } const result = /* expensive operation */; cache.set(input, result); return result; }

8. Object Spread vs Object.assign

// ✅ For small objects - spread is fine const merged = { ...a, ...b };

// ✅ For large objects - Object.assign is faster const merged = Object.assign({}, a, b);

References

• JavaScript Performance

• V8 Blog