jQuery Mousemove 및 성능 질문

Question

마우스가 4 개의 사각형 (다른 사각형에 대해 다른 텍스트)에 있으면 마우스 근처에 일부 텍스트를 표시하기 위해 일부 코드를 작성했습니다 (작동 함). html 태그 <지도> </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, 크롬과 오페라에서 테스트했습니다. Area.mousemove는 마우스를 움직일 때 CPU를 최대 100 %까지 섭취합니다. 문제는 마우스로지도를 움직일 때 필요한 리소스를 줄이는 방법입니다. 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(''); 
    }); 
});