About passive event listeners

I have been hearing about it for a couple of months but now is has been shipped on Chrome 51 and Firefox Nightly, EventListenerOptions are here.

Today I just want to share my thoughts about this new feature and why I’m sure is going to be game changer when talking about web performance, briefly, it allows to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners.

Background

It’s well known that doing expensive operations (manipulating the DOM, processing multiple xhr, CPU intense operations, etc…) while the user performs a scroll is an anti-pattern when building web apps, but what is not that well known for quite a lot of front-end developers is that even if you don’t do any of the stuff listed above but you just have touch handlers added to your page, you potentially will pay a huge price for it, even if you do nothing in those handler.

This issue happen because when you start performing a scroll, at that point, the browser doesn’t know if you are going to call preventDefault in you handler which will prevent the browser to do the normal scroll on the page. This means the browser will wait until check if preventDefault has been called and later update the scroll position, the sad thing about this is that 90% of the times you will not call it since you want the browser to do the scroll, but just because you have those handlers you will lose that default smoothness.

Introducing { passive: true }

document.addEventListener('touchstart', handler, {passive: true});

That simply addition will help you to prevent scroll junk on your sites, specially on mobile.

Compatibility

document.addEventListener('touchstart', handler, true);

it will be translated to:

document.addEventListener('touchstart', handler, {capture: true});

Making passive default

Why just don’t make them passive by default whenever is possible?

Done, I created default-passive-events - github.com/zzarcon/default-passive-events, a 40 lines snippet written in old school javascript that would make every single event listener of your app {passive: true}.

It actually turns out that I just had to modify less than 20 event listener across all my apps and add there the {passive: false}… that might look a lot but, if you think about the number of event listeners that I would had to upgrade using the other way it became something ridiculous.

Conclusion

You can follow me on Twitter or Github @zzarcon

A bunch of colleagues writing about #swift #javascript #ruby #algorithms #performance and coding stories

A bunch of colleagues writing about #swift #javascript #ruby #algorithms #performance and coding stories