jQuery mousemove性能 - 节流事件？

Question

我们面临着与mousemove连接的jQuery事件传播性能的问题:

我们有一个屏幕填充画布,需要跟踪用户是否在其上拖动鼠标,因此我们在该对象上添加了一个鼠标移动侦听器,如下所示:

ourCanvas.on('mousemove',
   function(event) {
      event.preventDefault();
      //our drag code here
   }
});

此代码工作正常,但我们在一个测试系统上的当前Firefox(24)中遇到了严重的性能问题.分析器告诉我们,大部分时间花在了jQuery.event.dispatch()(我们尝试了当前最新的jQuery 1.8,1.9,1.10和2.0).

我们通过在这里使用"jQuery.event.fix()"性能优化成功地减少了在dispatch()函数中花费的时间:http://bitovi.com/blog/2012/04/faster-jquery-event-fix. html但该测试系统的性能仍远低于我们的预期.

经过一些进一步的测试,我设法将其固定在系统上使用的鼠标上:它使用了1000Hz.我们将用过的鼠标切换到125Hz并且瞧瞧,性能非常好.

我们的假设是,鼠标上的高Hz率引起了很多mousemove事件,因此我们更改了上面的代码以应用事件限制,并且每隔X毫秒只调用事件处理:

var lastMove = 0;
var eventThrottle = 1;
ourCanvas.on('mousemove',
   function(event) {
      event.preventDefault();
      var now = Date.now();
      if (now > lastMove + eventThrottle) {
          lastMove = now;
          //our drag code here
      }
   }
});

它就像一个魅力,表现很棒.即使我们只跳过两毫秒的事件.

现在我有两个问题:

1. 我们有其他位置将mousemove监听器连接到不同的HTML元素,我想将这个手工制作的管道添加到所有这些mousemove处理程序,以免再次遇到问题.这在jQuery(2.0.3)中以某种方式可行吗？我已经看到preDispatchjQuery javascript中的钩子,但是他们已经在调用fix()之后也花了一些时间,我也想保存该调用.

2. 令我感到困惑的是,已经有2 eventThrottle毫秒足以获得非常好的性能所以我添加了一个计数器来查看有多少事件被跳过.令人惊讶的结果是:它只跳过0-1个事件......在100ms的节流下,跳过的事件大约为60-70,所以如果每ms有少于1个mousemove事件,为什么这个代码有这样的毕竟是积极的影响？

感谢任何评论,克里斯托弗

Answer 1

1 - 有一个节流 jQuery 插件：https ://github.com/cowboy/jquery-throttle-debounce

正如您在示例中所读到的，您可以替换：

// Bind the not-at-all throttled handler to the resize event.
$(window).resize( handler );

// Bind the throttled handler to the resize event.
$(window).resize( $.throttle( 250, handler ) ); // This is the line you want!

2 - 您想发布您的处理程序代码吗？

一个盲目的建议：Firebug 在 FF 24 上存在性能问题。您是否尝试过比较启用/禁用 Firebug 的性能？