.mousemove和memory,我需要优化这个吗？

Question

我在这里创建了一个轻量级测试的简单演示:http://jsfiddle.net/CGr9d/

当我使用Chrome开发工具记录内存使用情况时,我得到这个:http://cl.ly/LSDl,它基本上会上升到某一点然后再次下降并重新开始直到它再次达到之前的高点.

这是正常/好吗？有没有办法优化我的代码,以减少内存密集？

这是我的mousemove功能:

$('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' });
});

谢谢.

Answer 1

如果匹配选择器的元素.light-circle没有改变，你可以像这样优化：

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' });
});

这样，您就不会在每次鼠标移动时重新查询 DOM、分配新的 jQuery 对象等等。

但在垃圾收集环境中，看到内存增加、然后减少、然后再次增加是完全正常的。