Question

我刚刚编写了一些代码（并且可以工作），当鼠标位于4个矩形中的任意一个（不同矩形的不同文本）上时，在鼠标附近显示一些文本。我使用了html标签＆lt; map＆gt;＆lt; / map＆gt;，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％。 Opera吃得不到62％（从不超过62％）。 Chrome是最好的：平均约为28％，最高为42％。

可以将文本重新定位在鼠标附近而不是每毫秒，但每300毫秒，如果它有助于减少所需的资源。怎么做？对于这个问题比使用mouseenter而不是mousemove更好的解决方案？ 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

您可以在mouseenter上启动间隔并更新其中的位置。用间隔时间玩，找到一个好的频率。将jquery对象存储在一个变量中也可能有所帮助，但不会太多，因为你通过ID访问它们的速度非常快。

Answer 3

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

jQuery Mousemove和性能问题

3 个答案: