chrvadala / react-svg-pan-zoom

:eyes: A React component that adds pan and zoom features to SVG
https://chrvadala.github.io/react-svg-pan-zoom/
MIT License
677 stars 125 forks source link

Improving scrolling performance with passive listeners? #207

Open mikkopori opened 2 years ago

mikkopori commented 2 years ago

Hello,

Google Lighthouse recommends using passive listener to improve performance. Please consider the following change:

  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.autoPanIsRunning = true;
      requestAnimationFrame(this.autoPanLoop);
      this.ViewerDOM.addEventListener('wheel', this.onWheel, false);
    }
  }, {

would need to be set as passive

  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.autoPanIsRunning = true;
      requestAnimationFrame(this.autoPanLoop);
      this.ViewerDOM.addEventListener('wheel', this.onWheel, false, {passive: true});
    }
  }, {

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools

Br,

Mikko

echosing54 commented 1 year ago

Has this change been implemented yet?