javascript - .mousemove 和内存，我是否需要优化这个？

Question

我在这里创建了一个简单的光照测试演示：http: //jsfiddle.net/CGr9d/

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

这正常吗？有什么方法可以优化我的代码以减少内存占用？

这是我的鼠标移动功能：

$('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 对象等。

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