7

mousemove に関連する jQuery イベント伝搬パフォーマンスの問題に直面しています。

画面いっぱいのキャンバスがあり、ユーザーがキャンバス上でマウスをドラッグしたかどうかを追跡する必要があるため、次のようにそのオブジェクトにマウス移動リスナーを追加しました。

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

このコードは正常に動作しますが、1 つのテスト システムで現在の Firefox (24) に深刻なパフォーマンスの問題がありました。プロファイラーは、ほとんどの時間が費やされたことを示していますjQuery.event.dispatch()(最新の jQuery 1.8、1.9、1.10、および 2.0 を試しました)。

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

そしてそれは魔法のように機能し、パフォーマンスは素晴らしかった. スキップするのは 2 ミリ秒のイベントだけですが。

今、私は2つの質問があります:

  1. マウスムーブ リスナーをさまざまな HTML 要素にアタッチする場所が他にもあります。この手作りのスロットルをこれらすべてのmousemoveハンドラーに追加して、問題が再び発生しないようにしたいと考えています。これは jQuery (2.0.3) で良い方法で行うことができるのでしょうか? jQuery javascript でフックを見てきましpreDispatchたが、すでに fix() の呼び出しの後にあり、これにも時間がかかります。その呼び出しも保存したいと思います。

  2. eventThrottle本当に良いパフォーマンスを得るにはすでに 2 ミリ秒で十分であるという事実に当惑したので、スキップされたイベントの数を確認するためにカウンターを追加しました。驚くべき結果: 0 から 1 のイベントのみをスキップします... 100 ミリ秒のスロットルでは、スキップされたイベントは 60 から 70 のオーダーでした。結局プラス効果?

コメントありがとうございます、クリストファー

4

2 に答える 2