Chrome Browser становится laggy после события onClick

Question

Я разрабатываю решение параллакса для своего сайта, который получает позицию мыши каждый раз, когда пользователь перемещает курсор. Проблема, с которой я столкнулся, заключалась в том, что когда я нажимаю на документ в любом месте, браузер становится ломаным и нервным. Я могу записывать положение курсора без каких-либо задержек, однако отображение движения на самом документе изменчиво.

Это, как я получаю позицию мыши

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 хорошо.
Я заметил это в этом очень простом кодексе!
Нельзя сказать, что есть много элементов, движущиеся ...

Тем не менее, это происходит, когда вы держите мышь вниз и двигаться, как попытку сопротивления.
Не всегда на первых ... Но это происходит.

Я установил с preventDefault() и return false на эти события мыши внутри #Stage DIV .:

• mousedown
• mouseup
• click

Так в this codePen, есть кнопки с которыми вы можете играть, чтобы увидеть эффект всего этого.
Надеюсь, вам понравится сделанное на этом усилие. ;)

Вот моя Рекомендованная onMove функции:
(я удалил unnessary от того, что в CodePen)

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 знаков после запятой в порядке.
Он обеспечивает плавное перемещение слоев.
1 или 0 делает его «пиксельным прыжком».