search

tholman / cursor-effects

Old-school cursor effects for your browser built with modern JavaScript
https://tholman.com/cursor-effects
3.35k stars 246 forks source link

Reduce CPU usage for particle update no-ops #46

Closed rgwood closed 1 year ago

rgwood commented 1 year ago

Hello and thank you for this very cool project!

I use the fairy dust cursor on my website, and I happened to notice that it was using up a non-negligible amount of CPU time even when the cursor was idle. Some quick experiments suggested that the context.clearRect() call in updateParticles() was the culprit.

This PR adds short-circuiting behaviour to updateParticles() so that we do less work when there are no particles to update. On my laptop[^1] CPU usage when idle goes from ~7% to 3%.

I applied the fix to every cursor where it looked like it might be relevant (because the number of particles can go to zero).

[^1]: Surface Pro 8, i7-1185G7 CPU, 120hz display, Windows 11, latest Edge. CPU usage measured using the Performance Monitor tab in dev tools, on my website with a slightly customized version of the fairy dust cursor. Not the most reproducible benchmark but hopefully it will do 😅

tholman commented 1 year ago

All looks good to me! Will test/merge/update the version when I grab a chance the next few days! 🙏🙏🙏

rgwood commented 1 year ago

Cool!

I did some quick manual testing, just opened up index.html and moved my cursor around.

tholman commented 1 year ago

Second inspection, logic seems great!