search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.39k stars 2.26k forks source link

Performance: Consider passive eventlisteners #416

Closed sfunke closed 5 years ago

sfunke commented 6 years ago

Hey, firstly thanks for the fantastic library.

My suggestion for further improving scrolling performance is adding the scrolling event listeners passively.

With the option { passive: true } added to event listeners, they cannot be canceled and are delivered right down the chain, without the browser waiting for the code in the listener to execute. This can improve scrolling performance dramatically.

See here:

https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners https://developers.google.com/web/updates/2016/06/passive-event-listeners https://alligator.io/js/speed-up-scroll-events/

What do you think about it to the library, and would you accept pull requests?

jlmakes commented 6 years ago

I think it's a great idea. For some reason I thought all scroll event listeners were passive by default in browsers that support them—but that doesn't appear to be the case!

I'm open to pull requests.

# Fork the repository on GitHub, then...
git clone -b development "https://github.com/YOUR-USERNAME/scrollreveal.git"
cd scrollreveal
git checkout -b "your-new-branch-name"

In this particular case, I think implementing feature detection and updating the initialize method accordingly would be awesome! Otherwise, I will definitely revisit this for a future release.

jlmakes commented 5 years ago

Note: The basic scroll event cannot be canceled, so it does not need to be set passive. (Source)