May 4, 2015

Development Tip: Using Debounce Function to Increase Site Speed

by Mike McRoy

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.Florida-Trampoline-Insurance

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.