Performance in JavaScript

Measure first, then optimize algorithms, DOM interactions, and bundle size.

Measure

Use the Performance API and DevTools.

performance.mark('start')
heavy()
performance.mark('end')
performance.measure('heavy', 'start', 'end')
console.table(performance.getEntriesByName('heavy'))

Use Lighthouse for web app audits.

Algorithmic wins

Prefer O(n) set/map lookups; avoid n^2 loops; short‑circuit early.

DOM and layout

Batch DOM reads/writes; avoid layout thrash.

requestAnimationFrame(() => {
  // write DOM
})

Use documentFragment for bulk inserts; virtualize long lists.

Async and workers

Offload CPU‑heavy work to Web Workers; avoid blocking the main thread.

Network and bundles

Code‑split with dynamic imports; remove unused deps; compress and cache assets.

Memory

Null out references; avoid global caches; use Chrome’s Memory tools.

Summary

• Profile with Performance API/DevTools; audit with Lighthouse
• Optimize algorithms and batch DOM work
• Split bundles and offload heavy work to workers