🚀 7 JavaScript Performance Tricks Most Developers Don’t Use (But Should)

Yassine Belmahfoud — Mon, 23 Jun 2025 12:57:01 +0000

1. Avoid Object Allocations Inside Loops

Creating new objects in tight loops increases memory pressure and slows down garbage collection (GC).
Example:

for (let i = 0; i < 1000; i++) {
  const obj = { value: i };
}

You’re allocating 1,000 new objects — and GC has to clean them up.
Better (when reusability is possible):

const obj = {};
for (let i = 0; i < 1000; i++) {
  obj.value = i;
  // reuse obj
}

✅ Why it matters: Less GC = faster execution and lower memory usage.

Repeated access to nested properties triggers multiple lookups.
Example:

const total = user.profile.details.orders.length;

This traverses multiple object layers every time.
Better:

const orders = user.profile.details.orders;
const total = orders.length;

✅ Why it matters: Property lookup in JavaScript is dynamic and can be expensive, especially inside loops.

Yes, functional methods are elegant, but they often iterate more than needed:

const result = data.map(fn).filter(Boolean); // Two iterations

Faster alternative (for large arrays):

const result = [];
for (const item of data) {
  const transformed = fn(item);
  if (transformed) result.push(transformed);
}

✅ Why it matters: Combining into a single pass reduces time complexity and boosts performance on large datasets.

Many devs use:

setTimeout(() => { doSomething(); }, 0);

..expecting immediate execution. But browsers enforce a minimum delay, often 4ms or more.

Faster microtask alternatives

Promise.resolve().then(doSomething);
// or
queueMicrotask(doSomething);

✅ Why it matters: Microtasks run before the next rendering tick, ideal for ultra-fast UI reactions.

Large functions or libraries that aren't always used? Don’t import them by default.

❌ Bad:

if (condition) {
  heavyFn();
}

✅ Better:

if (condition) {
  import('./heavyFn.js').then(mod => mod.default());
}

This is especially useful in SPAs or client-heavy React/Vue apps.

✅ Why it matters: Reduces initial bundle size and improves Time to Interactive (TTI).

forEach() is elegant but slower than traditional loops.
Benchmarks consistently show:

for (let i = 0; i < arr.length; i++) { ... }

...is faster than:

arr.forEach(item => { ... });

✅ Why it matters: With large arrays or intensive operations, for, for...of, or even while offer better performance.

Developers often “optimize” based on assumptions. Don’t. Use:

console.time("process");
// code block
console.timeEnd("process");

Recommended tools:

🔬 jsbench.me – create and share benchmarks

🧪 Chrome DevTools > Performance tab – for real-world profiling

📊 Lighthouse – for web performance audits
✅ Why it matters: Real profiling reveals hidden bottlenecks. You can't fix what you can't measure.