Benchmark: debouce test - MeasureThat.net

Tests:

without debounce
const a = 1; const b = 2; const c = 3; let i = 0; const onScroll = () => { console.log('onscroll', i++); if (a > 2 && b > 3 && c > 4) { } } for (let i = 0; i < 1000; i++) { onScroll(); }
with debouce
const a = 1; const b = 2; const c = 3; let j = 0; let timer = null; const onScrollDebounced = () => { if (timer) clearTimeout(timer); timer = setTimeout(() => { console.log('onscroll deb', j++); if (a > 2 && b > 3 && c > 4) { } }, 100) } for (let i = 0; i < 1000; i++) { onScrollDebounced(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
without debounce
with debouce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
without debounce	235.4 Ops/sec
with debouce	515.4 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and benchmark results to understand what is being tested.

**Benchmark Definition**

The benchmark definition is a simple JavaScript code snippet that creates some constants, variables, and functions. It consists of two individual test cases:

1. **Without Debounce**: This test case measures the execution time of a function `onScroll` called 1000 times without any debouncing mechanism.
2. **With Debounce**: This test case measures the execution time of a function `onScrollDebounced` called 1000 times with a debounce mechanism using `setTimeout`.

**What is being tested?**

The primary focus of this benchmark is to compare the execution performance of two different approaches:

1. **Without Debounce**: This approach involves calling the `onScroll` function repeatedly without any delay or throttling.
2. **With Debounce**: This approach uses a debounce mechanism to delay the execution of the `onScrollDebounced` function for 100 milliseconds between each call.

**Library and Special JS Feature**

There is no specific library used in this benchmark. However, it does utilize the `setTimeout` function, which is a built-in JavaScript method for creating timeouts.

**Pros and Cons of Different Approaches**

1. **Without Debounce**:
	* Pros: No delay or throttling between function calls.
	* Cons: May lead to excessive function calls, potentially causing performance issues or even crashes if not handled properly.
2. **With Debounce**:
	* Pros: Introduces a delay between function calls, reducing the number of executions and preventing potential performance issues.
	* Cons: May introduce latency or responsiveness issues in UI applications where quick feedback is expected.

**Other Alternatives**

There are other approaches to debouncing functions, such as:

1. **Throttling**: Similar to debouncing, but with a focus on limiting the frequency of function calls rather than delaying them.
2. **Rate Limiting**: A more general concept that involves controlling the rate at which a function is called, regardless of whether it's debounced or throttled.

In this specific benchmark, the results show that the "With Debounce" approach has an execution time of 235 executions per second, while the "Without Debounce" approach has an execution time of 515 executions per second. This suggests that the debounce mechanism introduced a significant delay between function calls, affecting overall performance.

Related benchmarks:

debouce test (version: 0)

Comparing performance of: without debounce vs with debouce

Created: 6 years ago by: Guest

Jump to the latest result

without debounce

with debouce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):