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和性能问题

回答

相关问题