Throttled and Debounce should be familiar to front-end developers. Throttle and Debounce are two performance-saving programming techniques designed to optimize performance and improve the user experience. Are methods to limit the amount of JavaScript being executed based on DOM events. But what’s the difference?

Throttling enforces the maximum number of times a function can be called over a period of time. For example, execute this function at most every 100 milliseconds.

Assume that under normal circumstances, this function is called 1,000 times in 10 seconds. If you limit it to just once every 100 milliseconds, the function will be executed at most 100 times.

  • (10s * 1,000) = 10000 ms
  • 10,000 ms / 100 msLimit =100Maximum call

Shake stabilization forces a function not to be called again until it has been called for a period of time. For example, “Execute this function only if 100 milliseconds have passed without being called.”

Maybe a function gets called 1000 times in a short period of time, spread out over 3 seconds, and then stops calling. If started in 100 milliseconds, this feature will only start once in 3.1 seconds. Each time this function is called during an emergency, it resets the recovery timer.

What’s the difference?

A major use case for these concepts is certain DOM events, such as scrolling and resizing. For example, if you attach a scroll handler to an element and scroll that element down 5,000 pixels, you might see more than 100 events fired. If the event handler does a lot of work (such as heavy computation and other DOM operations), you might see performance problems (stings). If you can reduce the number of times the handler is executed without too much of an impact on the experience, it may be worth it.

Common scenarios are as follows:

  • Wait until the user stops resizing the window
  • Do not trigger until the user has stopped typingAJAXThe event
  • Monitor or get the scroll position of the page, at most every100msIn response to a
  • Ensure good performance when dragging elements in your application

How to do?

Both Throttle and Debounce functions are built into the Lodash script library and do not need to be implemented yourself.

The throttle (Throttle) scenario

$(" body ") on (" scroll ", _. Throttle (function () {} / / processing logic, 100));Copy the code

Image stabilization (Debounce) scenario

In real life, such as Baidu search, a drop-down selection will appear after input text, which is generally bound to the text event KeyPress.

The following figure depicts the performance monitoring capture of the state before Debounce, which triggers the search engine to request the data and present the results on the screen every time keyPress raises an event. In fact, these results are not seen by the user because they are overwritten by the subsequent results of the latest KeyPress event, and only the latest results are shown on the screen.

Here is the optimized result using Debounce, as follows:

As you can see, the search process and result rendering are called only once (when the user completes input), and there are no repeated calls to unimportant functions such as layout rendering, memory processing, DOM element management.

Here is an Example of an AJAX request using a search scenario:

There is also the following window resize scene, as follows:

$(window) on (the "resize", _. Debounce (function () {} / / processing logic, 100));Copy the code

In modern browsers, you can use the requestAnimationFrame to tell the browser that you want to perform an animation and ask the browser to call the specified callback function to update the animation before the next redraw. This method needs to be passed a callback function as an argument, which will be executed before the browser next redraw.

conclusion

Both Throttle and Debounce come from the need to delay the execution of functionality because the user does not want to make too many HTTP requests. These are important ways to improve Web performance today.