Comments (5)
Window.onscroll
You should never use window.onscroll
directly because it's an active
listener. With or without this package, this is a performance bottleneck.
Instead, you should use window.addEventListener('scroll', myFunction, { passive: true })
.
The { passive: true }
will make your listener passive
, which translates to much better performance.
Performance
As for the claim this package makes scrolling worst, it's hard to tell without knowing how you tested it.
Note: In case of scrolling, we're talking about throttle, you don't want to debounce
Like any wrapper, this package will add code to be executed. More code executes slower than less code, it's a given. The trick is to figure out where the break even point of the wrapper is.
If the throttle delay is too short or too long, this will show janky scrolling.
Let's say your function takes 5ms to executes. Over 1 second, the function can execute 200 times, which is well over the 60 FPS for a smoot scrolling. The downside is that this function is using up all your CPU cycles over that 1 second, it's making everything else lag.
If adding the wrapper makes the function execution take 15ms instead. It's obviously less performant per execution, but that's not the whole picture.
Throttling with a 16ms
delay would still give you a smoot 60 FPS scrolling. But you would only free 1ms for your CPU cycle to do something else...
Throttling with a 25ms
delay would give you a relatively smoot 40 FPS scrolling. But you would free plenty of ms for your CPU cycle to do something else...
Throttling with a 100ms
delay would give you a slow and janky 10 FPS
I'm not 100% sure with this last one, but throttling with a 5ms
delay would add 3x the amount of executions in the queue. Since you can only execute a 15ms function 66.6667 times per second, the extra 133.3333 executions would execute after the 1 second threshold and would appear as if the function is lagging.
It's not about this package being less performant than a native function on a per execution basis, it's about how you can leverage the throttling to get the same performance over time and free up plenty of CPU cycles for something else.
from throttle-debounce.
As far as I'm aware, it enables some browser optimizations, mostly for mobile usage.
I re-read the MDN definition and it wasn't as clearly stated as I though. I had to click on a link to a further section to see the real optimization it brings: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
from throttle-debounce.
@gregg-cbs have you noticed same issues with other implementation such as those in Lodash?
from throttle-debounce.
I like the note about passive true, i will try that sometime and read into it.
In what you were saying above, the scroll or performance was not laggy or bottle-necked, its just that the cpu was being used more.
The debounce function runs on every scroll tick to check if the function inside of the debounce is allowed to run. It is that running of the debounce on every scroll tick that hogged the cpu more than just running the function inside of it - your calculations would need to be -> debounce_execution_time vs inner_function_execution_time, which ever is shorter should be used because thats more performant.
In my case it could be that my inner function was so simple that it was easier to run then running a debounce function which has a timeout mechanism and what ever is inside of it.
Maybe i did it wrong, maybe I dont know what I am talking about, but that is what I saw.
from throttle-debounce.
@TheThirdRace How does passive set to true translate "to much better performance"? According to mdn, all that does is "indicates that the function specified by listener will never call preventDefault"
from throttle-debounce.
Related Issues (20)
- The cancel() method prevents all future invocations HOT 6
- `noTrailing` exegesis error HOT 2
- How can I get `value` in `react`? HOT 3
- [Violation] 'setTimeout' handler took <some value>ms HOT 3
- Feature request: Add noLeading option HOT 9
- Usage example doesn't show well the basic functionality HOT 3
- License is unclear HOT 2
- Dual license of MIT/GPL HOT 1
- Feature request: is pending HOT 1
- Cant seem to get Throttle working with onClick HOT 2
- Update types for new version HOT 4
- Normalize debounce API with throttle API changes HOT 5
- Throttle does not throttle on first call HOT 4
- It is recommended that the change information of API be noted in the README.md file. HOT 3
- async debounce? HOT 6
- Can I only comply with the MIT license?
- Strange behaviour with React useState + debounce HOT 5
- Proposal to add/adopt adaptive sync throttling method
- License condition HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from throttle-debounce.