Development Tip: Using Debounce Function to Increase Site Speed
When I work on a site as a front-end developer, my goal is to make sure that when a visitor lands on a page they get the information they need and can take the relevant action toward making a purchase. I also have to keep in mind the need to balance user experience and site speed to create an optimized shopping environment.
Event Processing Time
One of the issues that often arises is how to handle what’s called an “event” – i.e. an action taken by a user (like pressing the enter key, scrolling down a page or maximizing a screen). To give you an idea of why the way in which an event is handled matters to your site’s performance, consider the sort function. It automatically reacts every time an element is added. If a visitor adds 100 items in succession, then the sort function will run 100 times. Just think how bogged down a busy site could get.
Optimizing Code to Cut Down Processing Time
Normally, the computer’s operating system would react to each and every action. However, working with JavaScript, as a front-end developer, I can set up an event handler that keeps an eye out for these types of actions. I can then modify their behavior through a debounce function, which limits the rate at which a function can fire or even when it should fire. Optimizing code in this way can cut down on a lot of unnecessary processing time that could decrease the user’s experience.
Using the Debounce Function
Often, a user may click a button very fast (or often) due to impatience. To minimize the effect clicking has on processing time, I’ll debounce the event handler so it executes only after the very last click has ended.
In a similar manner, when a window is re-sized, the event handler actually fires many times as the window changes. Using the debounce function, I can hold off running the re-size until the window has reached its final dimensions. The benefit of only firing a function off at the end of an event like awindow resize is you don’t waste time and processes on calculating a state that will vanish in the next fraction of a second.
You can also use a debounce function for events that trigger an auto-complete. Let’s take the case where a visitor is using search to find “wedge sandals”. As they type in the item they’re looking for, each keystroke will be seen as an event. They may get to “wedge” while the backend services are only at “wed“. Debounce can be used to delay the search request until “wedge” is completely filled out, and then proceed to provide search result suggestions.
Avoid Poor Performance with Debounce
Today, applications are asked to do a lot which can put a strain on the supporting client (browser). As a result, there are plenty of opportunities for site speed and performance to suffer. The debounce function in Javascript offers an excellent way to optimize code and deliver a superior user experience.
Mike McRoy is an Applications Engineer on the LYONSCG eCommerce Implementation team, and has been working with Demandware since November 2014. Mike is a certified Demandware Developer and started his career in web development in 2003 launching a local freight truck hardware distributor site.
