JS Performance

JavaScript Performance: DOM Batching, Debouncing, & Memory Leaks

Optimizing JavaScript performance requires minimizing DOM reflows/repaints, managing asynchronous execution, and eliminating memory leaks caused by uncleared event listeners, timers, or detached DOM nodes.

Performance Optimization Strategies

flowchart TD
    Perf["JS Performance Optimization"] --> DOMOpt["DOM Batching: Use DocumentFragment or innerHTML once"]
    Perf --> RateLimit["Rate Limiting: Debouncing & Throttling frequent events"]
    Perf --> MemoryOpt["Memory Leak Prevention: Clear timers, remove listeners, nullify refs"]

Optimization Techniques Summary

Practical Code Example

// Demonstrating DocumentFragment DOM Batching and Debouncing

// 1. Efficient DOM Batching with DocumentFragment
function renderLargeList(items) {
  const container = document.getElementById("list-container") || document.body;
  const fragment = document.createDocumentFragment(); // Off-screen batch node

  items.forEach(text => {
    const li = document.createElement("li");
    li.textContent = text;
    fragment.appendChild(li); // Appends off-screen (No reflow!)
  });

  container.appendChild(fragment); // Single reflow pass for all items!
}

// 2. Debounce Utility Implementation
function debounce(fn, delayMs) {
  let timerId;
  return function(...args) {
    clearTimeout(timerId); // Reset timer on each burst invocation
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delayMs);
  };
}

// Example Debounced Search Handler
const handleSearchInput = debounce((query) => {
  console.log(`Executing API Search Query for: "${query}"`);
}, 300);

// Simulating rapid keypress events
handleSearchInput("K");
handleSearchInput("Ko");
handleSearchInput("Kod"); // Only this final call executes after 300ms!

Best Practices & Gotchas

• Batch DOM Reads and Writes: Avoid alternating DOM reads (element.offsetHeight) and writes (element.style.height) in loops, as this triggers forced synchronous layout thrashing.
• Clear Intervals: Always store timer IDs (const id = setInterval(...)) and call clearInterval(id) when components unmount.
• Use WeakMap / WeakSet for Caching: Use WeakMap or WeakSet when associating metadata with DOM nodes so memory can be garbage-collected automatically when nodes are removed.

Self-Check Challenge

Explain the key difference between Debouncing (e.g. search input) and Throttling (e.g. scroll listener).