Location>code7788 >text

Front-End Performance Optimization - Shakeproofing and Throttling - 02

Popularity：471 ℃/2024-08-03 11:24:31

Debounce and Throttle are two commonly used optimization techniques, which are mainly used to control high-frequency event triggers, such as scrolling, input, window resizing, etc. In this article, we will discuss the principles and implementation methods of Debounce and Throttle and their application scenarios. In this paper, we will discuss the principles, implementation methods and application scenarios of Debounce and Throttle.

Simple scenarios are: input box stabilization, scroll throttling

 

1. Debounce

Antidithering is a technique to reduce the number of times an event is triggered by delaying its execution when the event is triggered frequently. The core idea of anti-dithering is that when an event is triggered, instead of executing the handler function immediately, a timer is set, and if the event is triggered again before the timer has expired, the timer is restarted. This ensures that the event handler function is executed only once within a certain period of time.

Realization Principle:

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => (context, args), wait);
    };
}

 

Sample Application:

Send requests for search suggestions in real time as you type in the search box. Without anti-shaking, requests are sent for each input, causing server stress and resource waste. This scenario can be optimized by anti-shaking:

const searchInput = ('search');
const handleSearch = debounce((event) => {
    ('Fetching search results for:', );
    // Send search request
}, 300);

('input', handleSearch);

 

2. Throttle

Throttling is a technique to reduce the number of event processing times by limiting the frequency of function execution when events are triggered frequently. The core idea of throttling is to execute an event processing function only once in a specified time interval, regardless of how many times the event is triggered during the period.

Realization Principle:

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        const context = this;
        if (!inThrottle) {
            (context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

 

Sample Application:

Calculate the scroll position in real time to display the back to top button while the page is scrolling. Without throttling, scroll events will be triggered frequently, leading to performance issues. This scenario can be optimized by throttling:

const handleScroll = throttle(() => {
    ('Scroll position:', );
    // Handling scroll events
}, 200);

('scroll', handleScroll);

 

3. Anti-dithering and throttling options

While both stabilization and throttling are used to control high-frequency events, they have different application scenarios:

  • anti-shake: For scenarios that are triggered frequently but only need the last result, such as search input, window resizing, etc.
  • weir valve: For scenarios that are continuously triggered but need to be executed periodically, such as scroll events, window scroll position calculations, etc.

4. In-depth optimization

Immediate implementation version of anti-shake:

Sometimes we want to execute the event once immediately when it is triggered and then do the anti-shake control, we can add an immediate execution option to the anti-shake function:

function debounce(func, wait, immediate) {
    let timeout;
    return function(...args) {
        const context = this;
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            timeout = null;
            if (!immediate) (context, args);
        }, wait);
        if (callNow) (context, args);
    };
}

 

Throttling with logos:

Sometimes we want to be able to get the current state during the throttling process, we can add a marker to the throttling function:

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        const context = this;
        if (!inThrottle) {
            (context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

 

5. Integrated applications

In practical development, anti-shaking and throttling can be used in combination. For example, in a real-time search page, anti-shuddering is performed during user input and throttling is performed during result display to optimize the overall performance.

 

const searchInput = ('search');
const resultsContainer = ('results');

const fetchResults = debounce((query) => {
    ('Fetching results for:', query);
    // Simulate Search Requests
    setTimeout(() => {
         = `Results for: ${query}`;
    }, 500);
}, 300);

const handleScroll = throttle(() => {
    ('Scroll position:', );
    // Handling scroll events
}, 200);

('input', (event) => {
    fetchResults();
});

('scroll', handleScroll);

Anti-shaking and throttling are two important techniques in front-end performance optimization. By reasonably applying these two techniques, performance problems caused by high-frequency events can be significantly reduced and user experience can be improved. Other performance optimization techniques, such as code splitting, asynchronous loading, lazy loading, etc., will be introduced later.

 

<Previous Next>