Understanding Debounce and Throttle for Web Front‑End Performance Optimization

High‑frequency UI events like scroll , resize , or input changes can cause severe performance degradation if each event triggers a request or DOM update.

Debounce aggregates multiple calls that occur within a short time window into a single execution, running only after the events have stopped for a specified delay. The following code demonstrates a simple debounce implementation and its usage with window.onresize :

var debounce = function(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; }; window.onresize = debounce(myFunc, 100);

Typical debounce scenarios include input validation, AJAX requests, and window‑resize handling, where the function should fire only after the user stops interacting for a brief period.

Throttle limits the execution rate by ensuring a function runs at most once per defined interval, making it suitable for continuous actions such as dragging, infinite scrolling, or periodic data polling. Below is a basic throttle implementation and its usage:

var throttle = function(fn, delay) { var last = 0; return function() { var curr = new Date(); if (curr - last > delay) { fn.apply(this, arguments); last = curr; } }; }; window.onresize = throttle(myFunc, 100);

Throttle is ideal for scenarios where an action must occur regularly (e.g., once per second) regardless of how many events are fired, such as drag‑and‑drop or "load more" on scroll.

The popular utility library Lodash provides built‑in _.debounce and _.throttle functions. Its throttle implementation internally uses debounce with a maxWait option, as shown:

function throttle(func, wait, options) { let leading = true; let trailing = true; if (typeof func != 'function') { throw new TypeError('Expected a function'); } if (isObject(options)) { leading = 'leading' in options ? !!options.leading : leading; trailing = 'trailing' in options ? !!options.trailing : trailing; } return debounce(func, wait, { 'leading': leading, 'maxWait': wait, 'trailing': trailing }); } export default throttle;

In summary, debounce and throttle are essential techniques for front‑end performance optimization: debounce groups rapid, bursty events into a single call, while throttle guarantees a maximum call frequency, both applicable beyond JavaScript to other languages and server‑side contexts.