🟦 JavaScript Deep Dive — Issue #3

Modern JavaScript Performance Patterns (2025 Edition)

How to Write Faster, Smoother, More Efficient JS in a Modern Front-End World

JavaScript performance isn’t just about shaving a few milliseconds.
It affects:

• 🧠 Perceived responsiveness
• 📱 Battery life on mobile devices
• 🎨 Smoothness of UI animations
• ⚡ Load times and interactivity
• 🚀 Core Web Vitals scores

And with modern apps becoming more interactive — and LLM-driven apps doing async work at scale — understanding performance patterns is now a must-have skill for every serious JavaScript developer.

This issue shows you what really slows down JS, and the modern patterns that high-performance teams use in 2025 (React, Svelte, Vue, Vanilla, Node, and everything in between).

---

🟨 1. Understanding Rendering Costs

Every time you modify the DOM, the browser may need to:

1. Recalculate styles
2. Perform layout (expensive!)
3. Repaint
4. Composite layers

This pipeline is known as reflow + repaint, and it’s a major performance bottleneck.

❌ Bad: Causing layout thrashing

for (let i = 0; i < 100; i++) {
  el.style.width = el.offsetWidth + 1 + 'px';
}

This forces the browser to recalc layout 100 times.

✅ Good: Batch your reads + writes

const width = el.offsetWidth; // read once
el.style.width = width + 100 + "px"; // write once

Modern Best Practice (2025):

Use a scheduler like:

• requestAnimationFrame for visual updates
• requestIdleCallback for non-critical work
• Custom batching (React, Svelte, Solid, Vue all do this internally)

---

🟨 2. Avoid Long Tasks (Anything > 50ms)

A “long task” blocks the main thread and hurts INP/LCP, UI responsiveness, and touch input.

❌ Bad

// Freezes UI
while (expensiveOperation()) {}

✅ Good: Chunk work

function processChunk(items) {
  if (items.length === 0) return;

  const chunk = items.splice(0, 100);

  // Process in batches
  chunk.forEach(doWork);

  requestIdleCallback(() => processChunk(items));
}

processChunk(largeArray);

Why this works

The browser gets breathing room between chunks → smoother UI.

---

🟨 3. Use Web Workers for CPU-Heavy Work

JavaScript on the main thread should stay lightweight.
Heavy CPU work belongs in a Worker, where it won’t block rendering.

Example

// main.js
const worker = new Worker('worker.js');

worker.postMessage(largeData);

worker.onmessage = (e) => {
  console.log("Processed:", e.data);
};

// worker.js
onmessage = (e) => {
  const result = crunchNumbers(e.data);
  postMessage(result);
};

Use Workers for:

• Image processing
• Data parsing
• AI model inference / embedding
• Crypto / hashing
• Sorting huge arrays

---

🟨 4. Optimize Memory (Closures, Arrays & Hidden Costs)

Closures can unintentionally retain memory

function create() {
  const bigArray = new Array(1_000_000);
  return function() {
    console.log(bigArray.length);
  };
}

You think the array is temporary — but it’s retained forever.

Avoid memory leaks by:

✔ Nulling references
✔ Avoiding unnecessary closures
✔ Removing event listeners
✔ Using WeakMap / WeakRef for caching

---

🟨 5. Understanding Hidden Classes & Inline Caches (V8 Optimization)

JavaScript engines optimize objects internally.
But certain patterns cause de-optimizations.

❌ Avoid changing object shapes

obj.a = 1;
obj.b = 2;
delete obj.a; // slow!

❌ Avoid mixed types

arr[0] = 1;
arr[1] = "hello"; // deoptimized

❌ Avoid sparse arrays

const arr = [1, , 3]; // holey array = slower operations

✔ Keep arrays dense and typed

const arr = [1, 2, 3]; // optimized

---

🟨 6. Async Performance: “Fast” isn’t always fast

Promises and async/await provide clean code — but they can generate clogged microtask queues.

❌ Bad

for (let i = 0; i < 100000; i++) {
  await doSomething();
}

This creates 100,000 microtasks, blocking rendering.

✅ Good

Run tasks in parallel when possible:

await Promise.all(items.map(doSomething));

Or schedule in batches:

function batch(items) {
  const chunk = items.splice(0, 100);
  return Promise.all(chunk.map(doSomething));
}

async function run() {
  while (items.length) await batch(items);
}

---

🟨 7. Use Modern Browser APIs for Performance Wins

✔ IntersectionObserver

Load images or heavy components only when visible.

✔ ResizeObserver

Avoid expensive polling loops.

✔ AbortController

Cancel async operations you no longer need.

✔ structuredClone

Copy large objects 10–100x faster than JSON.

---

🧩 Mini Exercises for Readers

1. Why is this slow?

for (let i = 0; i < 10000; i++) {
  list.innerHTML += "<li>Item</li>";
}

---

2. Optimize this code:

async function run() {
  for (let item of items) {
    await fetchData(item);
  }
}

---

3. Explain why this array is slow:

const arr = [];
arr[999] = 1;

---

🟦 Performance Best Practices Checklist (2025 Edition)

✔ Batch DOM updates
✔ Offload heavy work to Web Workers
✔ Avoid long tasks (>50ms)
✔ Keep arrays dense
✔ Keep object shapes consistent
✔ Use rAF + rIC scheduling
✔ Lazy load everything possible
✔ Use parallel async execution
✔ Avoid large microtask queues
✔ Leverage Observers & AbortController

---

🏁 Final Thoughts

Performance is no longer just a “nice to have.”
It’s a competitive advantage — for SEO, user experience, and app quality.

Modern JavaScript isn’t just about writing code that works.
It’s about writing code that works fast, runs smoothly, and scales effortlessly.

Next issue:
👉 Issue #4 — Functional Programming Superpowers in JavaScript