jQuery Mousemoveと性能に関する質問

Question

マウスが4つの矩形のいずれかにあるときに、いくつかのコードを書きました（そして動作します）。私はhtmlタグ< map> </map>、cssとjqueryを使いました。すべてうまく動作します。マウスが画像上を移動しているとき、私は100％CPU使用量が嫌いです。

これはjqueryの一部です：

$('area').each(function(){ 
    var area = $(this), 
     alt = area.attr('alt'); 
    area.mousemove(function(event){ 
     var tPosX = event.pageX +10; 
     var tPosY = event.pageY - 85; 
     $('#rectangletext').css({top: tPosY, left: tPosX}); 
     $('#rectangletext').html(alt); 
    }).mouseleave(function(){ 
     $('#rectangletext').html(''); 
    }); 
}); 

私は（同時に、同じコンピュータ上）IE、FF、ChromeとOperaでそれをテストしてみました。 Area.mousemoveは、マウスを動かすと最大100％のCPUを消費します。問題は、マウスをその地図上に動かすときに必要となるリソースを減らす方法です。 IEは最悪です - CPU使用率は100％までジャンプします。 FFは約67％-100％を食べる。オペラは62％未満しか食べない（決して62％以上）。クロムが最高です：平均は約28％、最大は42％です。

ミリ秒単位ではなく、必要なリソースを減らすのに役立つ場合は、300ミリ秒ごとにマウスの近くにテキストを配置しても問題ありません。どうやってするか？ mousemoveの代わりにmouseenterを使用するよりも、この問題の解決策はありますか？ mouseenterの問題は、mouseleaveが呼び出されるまでポップアップテキストの位置を更新しないことです。

ありがとうございます。

Answer 1

マウスが最後に移動した時間を記録することができます。

var prevDate; // keep this as a global variable 

// put the following inside the mousemove function 
var date = new Date().getTime(); 
if(date - prevDate > 300){ 
    // your code goes here 
    prevDate = date; 
} 

Answer 2

マウスセンターでインターバルを開始し、そこの位置を更新することができます。 周りの周りを遊んで、良い周波数を見つけてください。 また、jqueryオブジェクトを変数に格納すると、少しは助けになるかもしれませんが、かなり速いIDでアクセスしているのであまり役に立ちません。

Answer 3

htmlを設定するのはかなり高価です。マウスセンターで行う必要があります。セレクタをループ外に移動すると、スピードアップが向上します。

var $rectText = $("#rectangletext"); 
$('area').each(function(){ 
    var area = $(this), 
     alt = area.attr('alt'); 
    area.mousemove(function(event){ 
     var tPosX = event.pageX +10; 
     var tPosY = event.pageY - 85; 
     $rectText.css({top: tPosY, left: tPosX}); 
    }).mouseenter(function(){ 
     $rectText.html(alt); 
    }).mouseleave(function(){ 
     $rectText.html(''); 
    }); 
});