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
