search

ismail9k / vue3-carousel

Vue 3 carousel component
https://ismail9k.github.io/vue3-carousel/
MIT License
660 stars 164 forks source link

Vue3-carousel gives me an impact on site performance #276

Closed sociojs closed 1 year ago

sociojs commented 1 year ago

Vue3-carousel gives me an impact on site performance

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.)

Chrome console: chrome-console

Lighthouse performance issue: lighthouse

As far as I search, the solution is to add "{passive: true}" to each addEventListener and removeEventListener, I tried but with no luck. Is there anyone currently fixing this part?

Update: The "Avoid an excessive DOM size" diagnostics warning was my bad (solved). "non-passive event listener....." issues still exist.

J-Sek commented 1 year ago

Vue3 docs:

For the .passive, .capture, and .once event modifiers, they can be concatenated after the event name using camelCase.

So in the sources of Carousel.ts we should make an adjustment:

onTouchstartPassiveCapture: config.touchDrag ? handleDragStart : null