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. "ステージ"ゾーンでマウスイベントを無効にします。
2は、第1の性能の懸念についての詳細をしている

...

しかし、あなたの主な問題は、マウスをクリックし、「干渉」についてでした...私はうまくundestood場合。
私はこの非常に単純なコードPenで気づいた！
多くの要素が動いているとは言えません...

ドラッグをしようとすると、マウスを押したまま移動すると発生します。
必ずしも最初ではない...しかしそれは起こる。

私は#Stageのdiv：this codePenでそう

• mousedown
• mouseup
• click

の内側に、ボタンがあり、これらのマウスイベントにpreventDefault()とreturn falseで固定一緒に遊ぶことができますこのすべての効果。
私はこの努力が欲しいと思います。 ;）ここで

は私の提案onMove機能である：
（私は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つの小数はOKだと思います。
レイヤの動きを滑らかに保ちます。
1または0は、 "ピクセルジャンプ"になります。