JavaScript Performance Optimization: Debouncing, Throttling & Memory Hygiene

Writing functioning code is only half the battle. In modern web engineering, writing high-performance, memory-efficient JavaScript that loads in milliseconds and runs smoothly at 60 FPS without memory leaks is what separates senior developers from novices.

1. Debouncing (Delaying Until Inactivity)

Debouncing ensures a function runs only after a user has stopped performing an action (e.g., waiting 400ms after the user finishes typing in a search bar before dispatching an API request):

function debounce(func, delayMs) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId); // Reset countdown on every keystroke
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delayMs);
    };
}

// Practical usage on Search Input:
const handleLiveSearch = debounce((query) => {
    console.log(`Dispatching API query: "${query}"`);
}, 400);

document.getElementById("search-input").addEventListener("input", (e) => {
    handleLiveSearch(e.target.value);
});

2. Throttling (Enforcing Fixed Rate Limits)

Throttling ensures that a high-frequency event (like window scrolling) executes at most once every 200 milliseconds:

function throttle(func, intervalMs) {
    let lastExecutedTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastExecutedTime >= intervalMs) {
            lastExecutedTime = now;
            func.apply(this, args);
        }
    };
}

// Throttle scroll listener to once every 200ms
window.addEventListener("scroll", throttle(() => {
    console.log("Scroll position evaluated at:", window.scrollY);
}, 200));

3. The 4 Major Causes of JavaScript Memory Leaks

• Forgotten Timers: Calling setInterval() without saving the timer ID and invoking clearInterval() when components unmount.
• Accidental Global Variables: Assigning values without let/const in non-strict mode creates permanent variables on the global window object that can never be garbage-collected.
• Detached DOM Elements: Storing a DOM node reference in a JavaScript variable after removing it from the document tree.
• Uncleared Event Listeners: Retaining listeners referencing large outer closure scopes.