Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
onIdle 1000
(version: 0)
Testing if window.cancelIdleCallback is fast or slow
Comparing performance of:
CancelCallback vs IfNotCallback
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
function onceIdle1(func = Boolean, group = func) { window.cancelIdleCallback(group.idleCallback); group.idleCallback = window.requestIdleCallback(func); } function onceIdle2(func = Boolean, group = func) { if (!group.idleCallback) { group.idleCallback = window.requestIdleCallback(() => { group.idleCallback = false; func(); }); } } function noop() { console.log(new Date().toISOString()); }
Tests:
CancelCallback
for(i = 0; i < 1000; i++) {onceIdle1(noop);}
IfNotCallback
for(j = 0; j < 1000; j++) {onceIdle2(noop);}
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
CancelCallback
IfNotCallback
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its components. **Benchmark Goal** The primary goal of this benchmark is to compare the performance of two approaches for canceling idle callbacks in JavaScript: 1. `onceIdle1`: Cancels the previous idle callback and then schedules a new one using `requestIdleCallback`. 2. `onceIdle2`: Checks if an idle callback exists, and if not, creates a new one and sets it to false before scheduling a new one. **Library Usage** In this benchmark, the following JavaScript libraries or APIs are used: 1. `window.requestIdleCallback`: A Web API for executing tasks at the next idle moment. It's part of the W3C's Idle API. 2. `console.log`: A built-in function for logging messages to the console. **Special JS Feature/Syntax** The benchmark uses JavaScript syntax that's specific to certain browsers, particularly Chrome and Edge: 1. `onceIdle1` and `onceIdle2` functions are defined using ES6 syntax (arrow functions and destructuring). 2. The `noop` function is a simple function that logs the current date and time using `console.log`. **Benchmark Approaches** The two benchmark approaches differ in how they handle the existence of an idle callback: 1. **CancelCallback (`onceIdle1`)**: Cancels the previous idle callback using `window.cancelIdleCallback`. If there's no previous callback, it schedules a new one using `requestIdleCallback`. 2. **IfNotCallback (`onceIdle2`)**: Checks if an idle callback exists. If not, it creates a new one and sets it to false before scheduling a new one. **Pros and Cons** Here are some pros and cons of each approach: 1. **CancelCallback (onceIdle1)** * Pros: + Efficient in terms of memory usage. + Simple to implement. * Cons: + May lead to unnecessary cancellations if the idle callback is called repeatedly with different functions. 2. **IfNotCallback (onceIdle2)** * Pros: + More efficient in terms of CPU cycles, as it avoids unnecessary cancellations. * Cons: + Requires more memory to store the idle callback and its state. + More complex implementation. **Other Considerations** When writing benchmark code, consider the following factors: 1. **Memory usage**: Measure how much memory is allocated for each approach. 2. **CPU cycles**: Measure how many CPU cycles are spent on each approach. 3. **Browser support**: Ensure that both approaches work correctly across different browsers and versions. **Alternatives** If you're looking for alternatives to these approaches, consider the following: 1. Use `window.clearTimeout` instead of `requestIdleCallback` if you need more control over the execution time. 2. Implement a custom idle callback system using a timer or scheduling library like `node-timer`. 3. Consider using a different approach that uses async/await or promises to handle idle callbacks. Keep in mind that this benchmark is focused on comparing two specific approaches, and its results may not be representative of other scenarios. When writing your own benchmarks, consider the goals, requirements, and constraints of your project, as well as potential alternatives and trade-offs.
Related benchmarks:
Debounce
raw cost of requestAnimationFrame
raw cost of requestAnimationFrame 2
onIdle()
Comments
Confirm delete:
Do you really want to delete benchmark?