search

motss / app-datepicker

Datepicker element built with Google's lit and Material Design 2021
https://npm.im/app-datepicker
MIT License
180 stars 51 forks source link

Recommended performance improvement #166

Closed gdevacc12 closed 4 years ago

gdevacc12 commented 4 years ago

Description

The Google Chrome browser warns (console) about a performance hit with non-passive event listeners. It points to tracker.js. A recommendation for improvement is documented here: passive-event-listeners

Modifications tested

My apologies, I didn't have much time to look at this but to quickly test, and serve as an example I made the following updates to tracker.js:

  1. in class Tracker, add the passive option to the event listeners. In practice the recommendation is to check if the passive option is support. In my case it wasn't necessary, hence:

    _element.addEventListener('mousedown', this._down, {passive:true}); 
_element.addEventListener('touchstart', this._down, {passive:true}); 
_element.addEventListener('touchmove', this._move, {passive:true});
_element.addEventListener('touchend', this._up, {passive:true});

  2. in _onDown(down), remove: ev.preventDefault()

Result

The Google warning went away and the element appeared to work OK. Hopefully this is useful to you.

motss commented 4 years ago

It seems like redundant to use ev.preventDefault(). I'll take a look at this.