JavaScript Performance Patterns
Table of Contents
Runtime performance micro-patterns for JavaScript hot paths. These patterns matter most in tight loops, frequent callbacks (scroll, resize, animation frames), and data-heavy operations. They apply to any JavaScript environment — React, Vue, vanilla, Node.js.
When to Use
Reference these patterns when:
- Profiling reveals a hot function or tight loop
- Processing large datasets (1,000+ items)
- Handling high-frequency events (scroll, mousemove, resize)
- Optimizing build-time or server-side scripts
- Reviewing code for performance in critical paths
Instructions
- Apply these patterns only in measured hot paths — code that runs frequently or processes large datasets. Don't apply them to cold code paths where readability is more important than nanosecond gains.
Details
Overview
Micro-optimizations are not a substitute for algorithmic improvements. Address the algorithm first (O(n^2) to O(n), removing waterfalls, reducing DOM mutations). Once the algorithm is right, these patterns squeeze additional performance from hot paths.
1. Use Set and Map for Lookups
Impact: HIGH for large collections — O(1) vs O(n) per lookup.
Array methods like .includes(), .find(), and .indexOf() scan linearly. For repeated lookups against the same collection, convert to Set or Map first.
Avoid — O(n) per check:
const allowedIds = ['a', 'b', 'c', /* ...hundreds more */]
function isAllowed(id: string) {
return allowedIds.includes(id) // scans entire array
}
items.filter(item => allowedIds.includes(item.id)) // O(n * m)
Prefer — O(1) per check:
const allowedIds = new Set(['a', 'b', 'c', /* ...hundreds more */])
function isAllowed(id: string) {
return allowedIds.has(id)
}
items.filter(item => allowedIds.has(item.id)) // O(n)
For key-value lookups, use Map instead of scanning an array of objects:
// Avoid
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
const user = users.find(u => u.id === targetId) // O(n)
// Prefer
const userMap = new Map(users.map(u => [u.id, u]))
const user = userMap.get(targetId) // O(1)
2. Batch DOM Reads and Writes
Impact: HIGH — Prevents layout thrashing.
Interleaving DOM reads (e.g., offsetHeight, getBoundingClientRect) with DOM writes (e.g., style.height = ...) forces the browser to recalculate layout multiple times. Batch all reads first, then all writes.
Avoid — layout thrashing (read/write/read/write):
elements.forEach(el => {
const height = el.offsetHeight // read → forces layout
el.style.height = `${height * 2}px` // write
})
// Each iteration forces a layout recalculation
Prefer — batched reads then writes:
// Read phase
const heights = elements.map(el => el.offsetHeight)
// Write phase
elements.forEach((el, i) => {
el.style.height = `${heights[i] * 2}px`
})
For complex cases, use requestAnimationFrame to defer writes to the next frame, or use a library like fastdom.
CSS class approach — single reflow:
// Avoid multiple style mutations
el.style.width = '100px'
el.style.height = '200px'
el.style.margin = '10px'
// Prefer — one reflow
el.classList.add('expanded')
// or
el.style.cssText = 'width:100px;height:200px;margin:10px;'
3. Cache Property Access in Tight Loops
Impact: MEDIUM — Reduces repeated property resolution.
Accessing deeply nested properties or array .length in every iteration adds overhead in tight loops.
Avoid:
for (let i = 0; i < data.items.length; i++) {
process(data.items[i].value.nested.prop)
}
Prefer:
const { items } = data
for (let i = 0, len = items.length; i < len; i++) {
const val = items[i].value.nested.prop
process(val)
}
This matters for arrays with 10,000+ items or when called at 60fps. For small arrays or infrequent calls, the readable version is fine.
4. Memoize Expensive Function Results
Impact: MEDIUM-HIGH — Avoids recomputing the same result.
When a pure function is called repeatedly with the same arguments, cache the result.
Simple single-value cache:
function memoize<T extends (...args: any[]) => any>(fn: T): T {
let lastArgs: any[] | undefined
let lastResult: any
return ((...args: any[]) => {
if (lastArgs && args.every((arg, i) => Object.is(arg, lastArgs![i]))) {
return lastResult
}
lastArgs = args
lastResult = fn(...args)
return lastResult
}) as T
}
const expensiveCalc = memoize((data: number[]) => {
return data.reduce((sum, n) => sum + heavyTransform(n), 0)
})
Multi-key cache with Map:
const cache = new Map<string, Result>()
function getResult(key: string): Result {
if (cache.has(key)) return cache.get(key)!
const result = computeExpensiveResult(key)
cache.set(key, result)
return result
}
For caches that can grow unbounded, use an LRU strategy or WeakMap for object keys.
5. Combine Iterations Over the Same Data
Impact: MEDIUM — Single pass instead of multiple.
Chaining .filter().map().reduce() creates intermediate arrays and iterates the data multiple times. For large arrays in hot paths, combine into a single loop.
Avoid — 3 iterations, 2 intermediate arrays:
const result = users
.filter(u => u.active)
.map(u => u.name)
.reduce((acc, name) => acc + name + ', ', '')
Prefer — single pass:
let result = ''
for (const u of users) {
if (u.active) {
result += u.name + ', '
}
}
For small arrays (< 100 items), the chained version is fine and more readable. Optimize only when profiling shows it matters.
6. Short-Circuit with Length Checks First
Impact: LOW-MEDIUM — Avoids expensive operations on empty inputs.
Before running expensive comparisons or transformations, check if the input is empty.
function findMatchingItems(items: Item[], query: string): Item[] {
if (items.length === 0 || query.length === 0) return []
const normalized = query.toLowerCase()
return items.filter(item =>
item.name.toLowerCase().includes(normalized)
)
}
7. Return Early to Skip Unnecessary Work
Impact: LOW-MEDIUM — Reduces average-case execution.
Structure functions to exit as soon as possible for common non-matching cases.
Avoid — always does full work:
function processEvent(event: AppEvent) {
let result = null
if (event.type === 'click') {
if (event.target && event.target.matches('.actionable')) {
result = handleAction(event)
}
}
return result
}
Prefer — exits early:
function processEvent(event: AppEvent) {
if (event.type !== 'click') return null
if (!event.target?.matches('.actionable')) return null
return handleAction(event)
}
8. Hoist RegExp and Constant Creation Outside Loops
Impact: LOW-MEDIUM — Avoids repeated compilation.
Creating RegExp objects or constant values inside loops or frequently-called functions wastes CPU.
Avoid — compiles regex 10,000 times:
function validate(items: string[]) {
return items.filter(item => {
const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
return pattern.test(item)
})
}
Prefer — compile once:
const EMAIL_PATTERN = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
function validate(items: string[]) {
return items.filter(item => EMAIL_PATTERN.test(item))
}
9. Use toSorted(), toReversed(), toSpliced() for Immutability
Impact: LOW — Correct immutability without manual copying.
The new non-mutating array methods avoid the [...arr].sort() pattern and communicate intent more clearly.
Avoid — manual copy then mutate:
const sorted = [...items].sort((a, b) => a.price - b.price)
const reversed = [...items].reverse()
const without = [...items]; without.splice(index, 1)
Prefer — non-mutating methods:
const sorted = items.toSorted((a, b) => a.price - b.price)
const reversed = items.toReversed()
const without = items.toSpliced(index, 1)
These are available in all modern browsers and Node.js 20+.
10. Use requestAnimationFrame for Visual Updates
Impact: MEDIUM — Syncs with the browser's render cycle.
DOM updates triggered outside the rendering cycle (from timers, event handlers, etc.) can cause jank. Batch visual updates inside requestAnimationFrame.
Avoid — updates outside render cycle:
window.addEventListener('scroll', () => {
progressBar.style.width = `${getScrollPercent()}%`
counter.textContent = `${getScrollPercent()}%`
}, { passive: true })
Prefer — synced to render:
let ticking = false
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
const pct = getScrollPercent()
progressBar.style.width = `${pct}%`
counter.textContent = `${pct}%`
ticking = false
})
ticking = true
}
}, { passive: true })
11. Use structuredClone for Deep Copies
Impact: LOW — Correct deep cloning without libraries.
structuredClone() handles circular references, typed arrays, Dates, RegExps, Maps, and Sets — unlike JSON.parse(JSON.stringify()).
// Avoid — loses Dates, Maps, Sets, undefined values
const copy = JSON.parse(JSON.stringify(original))
// Prefer — handles all standard types
const copy = structuredClone(original)
Note: structuredClone cannot clone functions or DOM nodes. For those cases, implement a custom clone.
12. Prefer Map Over Plain Objects for Dynamic Keys
Impact: LOW-MEDIUM — Better performance for frequent additions/deletions.
V8 optimizes plain objects for static shapes. When keys are added and removed dynamically (caches, counters, registries), Map provides consistently better performance.
// Avoid for dynamic keys
const counts: Record<string, number> = {}
items.forEach(item => {
counts[item.category] = (counts[item.category] || 0) + 1
})
// Prefer for dynamic keys
const counts = new Map<string, number>()
items.forEach(item => {
counts.set(item.category, (counts.get(item.category) ?? 0) + 1)
})
Source
Patterns from patterns.dev — JavaScript performance guidance for the broader web engineering community.