Open stramel opened 3 years ago
This is a perf enhancement suggested by lighthouse.
When wheel, touchstart, mousewheel, touchmove, orscroll are bound in the template, they should utilize the passive: true property.
wheel
touchstart
mousewheel
touchmove
scroll
passive: true
To achieve this, you could:
@eventOptions({passive: true})
<div @scroll=${{ handleEvent: handleScroll, passive: true }}>
Tricky things to note, these 2 cases should pass:
passive: false
e.preventDefault();
passive
https://web.dev/uses-passive-event-listeners/ https://github.com/GoogleChrome/lighthouse/blob/75735c6b2a2c13f0b92a0b9d00067235ffa21fcc/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html#L273
This is a perf enhancement suggested by lighthouse.
When
wheel
,touchstart
,mousewheel
,touchmove
, orscroll
are bound in the template, they should utilize thepassive: true
property.To achieve this, you could:
@eventOptions({passive: true})
<div @scroll=${{ handleEvent: handleScroll, passive: true }}>
Tricky things to note, these 2 cases should pass:
passive: false
explicitly set to false.e.preventDefault();
it should be fine to bind withoutpassive
.https://web.dev/uses-passive-event-listeners/ https://github.com/GoogleChrome/lighthouse/blob/75735c6b2a2c13f0b92a0b9d00067235ffa21fcc/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html#L273