Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
debouce test
(version: 0)
Benchmark.js
Comparing performance of:
without debounce vs with debouce
Created:
6 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=490719" width="100%" height="500px"></iframe>
with debouce
515/s
without debounce
235/s
View exact numbers
Test name
Executions per second
✓
with debouce
515 Ops/sec
without debounce
235 Ops/sec
Autogenerated LLM Summary
(model
gemma2:9b
, generated one year ago):
This benchmark tests the performance difference between executing a function repeatedly without any optimization (debounce) and with a debounce mechanism. Here's a breakdown: **Without Debounce:** * **Description:** The code simply calls `onScroll()` 1000 times in a loop. Each call logs "onscroll" followed by a counter increment (`i++`). * **Options:** There are no specific options being compared here, it's just the baseline performance of repeatedly calling the function. * **Pros/Cons:** No overhead from debouncing logic. However, it can lead to excessive log output and potential performance issues if the `onScroll` function is complex or resource-intensive, as it gets called very frequently. **With Debounce:** * **Description:** This code uses a debounce mechanism. * It stores a reference (`timer`) to a timeout ID. * Before calling the function, it checks if `timer` exists (meaning there's an ongoing timeout). If so, it clears the existing timeout using `clearTimeout(timer)`. * Then, it sets a new timeout (`setTimeout`) that will execute the `onScrollDebounced` function after 100 milliseconds. * **Options:** The debounce time (100 milliseconds in this case). * **Pros/Cons:** * **Pros:** Prevents unnecessary function calls and improves performance by limiting how often the function executes. This is especially beneficial for events like scrolling or resizing, where frequent calls can strain performance. * **Cons:** There's a slight overhead from managing the timeout mechanism. **Alternatives:** The `requestAnimationFrame` method is another common technique for optimizing event-driven code. It schedules your function to be executed before browser repainting, leading to smoother animations and often better performance than simple `setTimeout`. Let me know if you have any other questions!
Comments
Confirm delete:
Do you really want to delete benchmark?