When you attach a scroll event to an element and scroll down 1000px, it’s common to trigger over 100 events. This issue is particularly prevalent in parallax websites. If your scroll event handler performs heavy calculations, it can cause your page to become slow, janky, and unresponsive, especially on devices with lower processing power. See the bad example here.
To enhance scrolling performance, it’s essential to reduce the frequency at which scroll events are triggered. Here’s an effective example:
jQuery
var debounce_timer;
$(window).scroll(function() {
if(debounce_timer) {
window.clearTimeout(debounce_timer);
}
debounce_timer = window.setTimeout(function() {
// run your actual function here
console.log(‘Fire’);
}, 100);
});The code above shows that the actual callback function in the scrolling event will be fired after 100ms. If a scroll event is fires again & the pending timeout (100ms) has not passed yet, it will clear the pending timeout and reset it again.
Following is another way we wrote it in vanilla JS.
Vanilla JavaScript
var debounce_timer;
window.onscroll = function(){
if(debounce_timer) {
window.clearTimeout(debounce_timer);
}
debounce_timer = window.setTimeout(function() {
// run your actual function here
console.log(‘Fire’);
}, 100);
};To see how we limit down the rate of scroll event being fired, please check out the makeover result here.
Conclusion: Boost Scrolling Performance with Debouncing Techniques
In modern web development, optimizing scrolling performance is essential to ensure a smooth and responsive user experience, particularly on devices with limited resources. As we’ve discussed, attaching a scroll event directly to an element can result in numerous event fires, leading to performance issues such as lag, jank, and poor responsiveness—especially on mobile devices. This problem is particularly common in interactive designs like parallax websites, where scroll events trigger intensive calculations.
By implementing debouncing on scroll events, you can effectively limit the number of times the scroll handler is called, preventing unnecessary calculations and improving page performance. Debouncing ensures that your scroll event handler is triggered only after a certain delay, reducing the load on the browser and keeping the page fluid and responsive. This simple yet powerful optimization technique not only enhances the user experience but also helps with overall performance, ensuring that your website functions smoothly even on less powerful devices.
Incorporating debouncing into your scroll event handling is a quick win for optimizing performance, providing users with a seamless browsing experience without compromising on functionality. Whether you’re building parallax effects, infinite scroll, or any other scroll-driven interaction, debouncing is an essential technique to consider for a faster, more efficient web application.
More Mobile Web Development Tutorial?
Check out the complete list of onlyWebPro’s Mobile Web Development tutorial here!