onClick 이벤트 후 Chrome 브라우저가 느려집니다.

Question

사용자가 커서를 이동할 때마다 마우스 위치를 가져 오는 내 웹 사이트에 대한 시차 솔루션을 개발 중입니다. 내가 마주 치게 된 문제는 문서의 아무 곳이나 클릭 할 때 브라우저가 느리고 지저분 해졌습니다. 어떤 지연없이 커서의 위치를 ​​기록 할 수 있지만 문서 자체의 이동 표시가 고르지 않습니다.

이 내가 for 루프없이 나는 또한 번역을 구현하는 시도 마우스 위치

this.onMove=function(posX, posY){ 
     bigX = $('#Stage').width(); 
     bigY = $('#Stage').height(); 
     console.log(posX+" - "+posY); //this is working properly in real-time 
     posX = bigX/2 - (posX); 
     posY = bigY/2 - (posY); 
     for(i = 1; i<4; i++){ //the part that seems to be lagging 
      $('.layer'+(i-1)+'').css({"-webkit-transform":"translate("+posX/50*i+"px,"+posY/50*i+"px)"}); 
     } 
    } 

$(document).mousemove(function(e){ 
    this.onMove(e.pageX, e.pageY); 
}); 

무엇입니까하지만 결과는 동일 방법이다. 이 문제는 브라우저가 느려지거나 루프에서 멈출 수있는 일종의 onclick 이벤트가 있습니까?

Answer 1

문제를 이해하기 위해 CopePen을 테스트했습니다 ...
코드는 제공되지 않았으므로로만 변경됩니다.

놀고있는 동안 (나는 정말로 즐거웠다!), 나는 이것들을 고려해야한다고 생각했다.

1. 불필요한 계산을 줄입니다.
2. 한계 소수점을 translate()으로 전달했습니다.
3. "스테이지"영역에서 마우스 이벤트를 비활성화합니다.
두 먼저 성능 문제에 대하여 더 많은 관심을 가지고있다

...

하지만 주요 문제는 마우스 클릭 "간섭"에 대한했다 ... 나는 잘 undestood합니다.
나는이 아주 간단한 코드에서 그것을 알아 냈습니다. 펜!
많은 요소가 움직이고 있다고 말할 수는 없습니다 ...

여전히 드래그를 시도하는 것처럼 마우스를 누르고 움직이면 발생합니다.
처음에는 항상 그렇지는 않지만 ... 그렇습니다.

내가 this codePen에 #Stage 사업부 :

• mousedown
• mouseup
• click

그래서 내부에서,이 마우스 이벤트에 preventDefault() 및 return false 고정, 버튼이 있습니다 함께 놀 수있는 이 모든 것의 효과.
이 작업을 수행하기를 바랍니다.
(나는 CodePen에 무엇이에서 unnessary을 제거)

function onMove(posX, posY){ 
    bigX = $('#Stage').width(); 
    bigY = $('#Stage').height(); 
    console.log(posX+" - "+posY); //this is working properly in real-time 

    // Make most of your calculation ONCE 
    posX = (bigX/2 - (posX))/50; 
    posY = (bigY/2 - (posY))/50; 

    // Translating layers now 
    for(i = 1; i<4; i++){ 

     // Make the multiplication ONCE 
     var thisLayerPosX = posX*i; 
     var thisLayerPosY = posY*i; 

     // Limit decimals 
     thisLayerPosX = thisLayerPosX.toFixed(3); 
     thisLayerPosY = thisLayerPosY.toFixed(3); 

     var k = i-1; 
     $('.layer'+k).css({"-webkit-transform":"translate("+thisLayerPosX+"px,"+thisLayerPosY+"px)"}); 

    } 
} 

내가 3 개 소수가 확인 있다고 생각 :)

여기에 내 제안 onMove 기능입니다.
레이어 이동을 부드럽게 유지합니다.
1 또는 0을 사용하면 "픽셀 급격한"현상이 발생합니다.