Default touch/wheel events to passive

[tigt]

Description

This is an optimization that Svelte does to be fast by default, and it seems worth stealing:

passive — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)

— Events / Event modifiers • Svelte Tutorial

Why

Many times when you encounter scroll jank, the culprit is a touch event listener. Touch event listeners are often useful for tracking user interactions and creating custom scroll experiences, such as cancelling the scroll altogether when interacting with an embedded Google Map. Currently, browsers can't know if a touch event listener is going to cancel the scroll, so they always wait for the listener to finish before scrolling the page. Passive event listeners solve this problem by enabling you to set a flag in the options parameter of addEventListener indicating that the listener will never cancel the scroll. That information enables browsers to scroll the page immediately, rather than after the listener has finished.

— Improving Scroll Performance with Passive Event Listeners

Possible Implementation & Open Questions

• sveltejs/svelte/src/compiler/compile/nodes/Element.ts#L70
• sveltejs/svelte/src/compiler/compile/nodes/EventHandler.ts#L27

Is this something you're interested in working on?

Yes

[x4080]

Hi, is this what lighthouse warning about ? And is it already implemented yet ?

Thanks

[tigt]

Yes, I think this is one and the same.

Does not use passive listeners to improve scrolling performance:

Touch and wheel event listeners are useful for tracking user interactions and creating custom scrolling experiences, but they can also delay page scrolling. Currently, browsers can't know if an event listener will prevent scrolling, so they always wait for the listener to finish executing before scrolling the page. Passive event listeners solve this problem by letting you indicate that an event listener will never prevent scrolling.

Unfortunately, no, it is not implemented yet, nor the functionality to manually set such listeners to passive (#1408). You can remove the warning by bypassing the onEvent= attribute name shortcuts and instead getting a ref and attaching event listeners the old-fashioned way.

[x4080]

@tigt Thanks

[DylanPiercey]

I think this is largely a duplicate of #1408