.mousemove and memory, do I need to optimize this or not?

Question

I've created a simple demo of a light-test-thing here: http://jsfiddle.net/CGr9d/

When I record the memory usage using the Chrome dev tools I get this: http://cl.ly/LSDl, it basically go up until a certain point and then go down again and start over until it reaches the previous high point again.

is this normal/OK? Is there any way to optimize my code to make it less memory intensive?

This is my mousemove function:

$('body').mousemove(function(e) {
  //2000 is half the image width/height, of course used for centering
  $('.light-circle').css({ backgroundPosition: (e.pageX-2000)+'px '+(e.pageY-2000)+'px' });
});

Thanks.

Answer 1

If the elements matching the selector .light-circle don't change, you can optimize a bit like this:

var circles = $('.light-circle');
$('body').mousemove(function(e) {
  //2000 is half the image width/height, of course used for centering
  circles.css({ backgroundPosition: (e.pageX-2000)+'px '+(e.pageY-2000)+'px' });
});

That way you're not re-querying the DOM, allocating a new jQuery object, etc., etc., on every mouse move.

But it's perfectly normal in a garbage collected environment to see memory increase, then decrease, then increase again.