CODEWITHSUNDEEP
javascript
cup_of
cup_of

Reputation: 6697

Running code on every mouse event performance

In my app I set up a mouse event to occur every time the mouse gets moved. Logging it looks like this:

enter image description here

Each one of those instances gets created every time a mouse gets moved, so thousands and potentially tens of thousands of these can occur while a user is on the component.

Then I have to run some code on each event to get the functionality I want:

  let paths = e.path.map(x => {
    return x.className;
  })

  console.log(paths);

  if (paths.includes('gantt_grid')) {
    // console.log('includes');
  }

which gets the following result:

enter image description here

I have the functionality working but my question is, how will this be performance wise? It doesn't seem to be slowing it down but I'm sure this is bad practice. Mapping thousands and thousands of times does not seem good to me. Will the browser be able to handle this?

If this is bad, is there another way to do this either in JS or Angular?

Upvotes: 1

Views: 1776

Answers (3)

lumio
lumio

Reputation: 7585

It might not slow things down right now, depending on your event handler and what exactly you are computing. However, if you do some heavy lifting like DOM manipulations, it indeed can slow down your app as it fills up the main thread.

Use something like lodash throttle or debounce. Often times you don't need so many events being fired.

A little example:

const g = (id) => document.getElementById(id);
const handler = (e) => e.target.innerText = JSON.stringify({
  x: e.clientX,
  y: e.clientY
})

g('regular').addEventListener('mousemove', handler);
g('throttle').addEventListener('mousemove', _.throttle(handler, 1000));
g('debounce').addEventListener('mousemove', _.debounce(handler, 1000));
main div {
  width: 150px;
  height: 50px;
  margin: 10px;
  background: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

<main>
  <div id="regular"></div>
  <div id="throttle"></div>
  <div id="debounce"></div>
</main>

There are even more options you can pass so you can be sure that your event handler is being called at the beginning and end of the event. With debounce you can even go as far as simulate the throttle itself.

Upvotes: 3

simka
simka

Reputation: 901

well, they say premature optimization is not a good thing, as well as optimizing performance without measuring it first - you may actually worsen it without realising that. so first of all, measure how performant this is now.

second of all, have you tried testing your feature on low tier device/simulating such device in your browser's dev tools? I'd start with that and if it's fine then I'd leave it alone, to be honest. If you predict more calculations being triggered by this event in the future, you can document this potential bottleneck somehow.

If after doing the above you come to conclusion that performance is not satisfactory, first thing I would do trying to optimize it would be to throttle or debounce your event handler, depending on your specific use case. Then I would probably look into if statement condition and measure if, for example, some is faster than includes but if you throttle the call it probably won't give you that much at this point.

Upvotes: 1

Nikko Khresna
Nikko Khresna

Reputation: 1009

That is a question you need to answer, since got no source code to measure.

https://developers.google.com/web/tools/chrome-devtools/memory-problems/ It has some useful tricks to measure performance and detect a memory leak

Upvotes: 1

Related Questions