jQuery Mousemove和性能問題

我剛剛寫了一些代碼（和它的作品），用於在鼠標位於4個矩形（不同矩形的不同文本）上時在鼠標附近顯示一些文本。我用html標籤< map> </map>，css和jquery。一切正常。當鼠標移動到圖片上時，我不喜歡100％的CPU使用率。jQuery Mousemove和性能問題

這是一個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，鉻和歌劇測試它（在同一時間，在同一計算機上）。當你移動你的鼠標時，Area.mousemove吃100％的CPU。問題是：如何減少在地圖上移動鼠標時所需的資源？ IE是最差的--CPU使用率跳到100％。 FF約67％-100％。歌劇吃的不到62％（從不超過62％）。 Chrome是最好的：平均約爲28％，最高爲42％。

將文本重新定位到靠近鼠標的位置並不是每毫秒，而是每隔300毫秒（如果它有助於減少所需的資源）即可。怎麼做？這個問題比使用mouseenter而不是mousemove更好的解決方案？ mouseenter的缺點是它不會更新彈出文本的位置，直到調用mouseleave。

謝謝。

來源

2011-09-26 Haradzieniec

您可以跟蹤鼠標上次移動的時間。

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

來源

2011-09-26 07:06:39

工作正常，非常感謝。唯一的問題是你必須爲prevDate設置值（任何小數字），因爲對於聲明的prevDate而言，如果（date - prevDate> 300）沒有任何值，則始終爲false，因此不顯示任何內容。謝謝！順便說一句，對於100 IE仍然使用100％CPU，對於200ms IE使用約80％CPU，對於300ms約68％，對於400ms約60％。謝謝。 – Haradzieniec

您可以在mouseenter上開始間隔並更新其中的位置。玩間隔時間來找到一個好的頻率。同時將jquery對象存儲在一個變量中可能會有所幫助，但不是很多，因爲您通過相當快的ID訪問它們。

來源

2011-09-26 07:04:21 Andy

設置html非常昂貴，你只需要在mouseenter上完成。將選擇器移到循環外部也會給你一個很好的加速。

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

來源

2011-09-26 07:05:19 ABentSpoon

非常感謝。我測試了你的例子。不幸的是，它需要相同數量的CPU（IE爲100％）。無論如何非常感謝你。無論如何，你的答案有助於瞭解它是如何工作的。 – Haradzieniec

jQuery Mousemove和性能問題

回答

相關問題