Улучшение производительности анимации перетаскивания jQuery

Question

Недавно я начал новый проект, который представляет собой флипбук CSS3/jQuery (нажмите, чтобы перевернуть или нажмите &, перетащите правую страницу).

Посмотреть live here или play with the fiddle

ВОПРОС:

Как я могу улучшить скорость при перемещении страницы?

кажется OK в Chrome и Safari, но это медленнее/'steppy' в Firefox и действительно ужасен в Opera (испытан в последних версиях на Mac OS X Snow Leopard)

BTW .. Я m все еще очищает код/​​я попытался удалить вращение, но он ничего не меняет.

У меня было несколько тестеров, которые жаловались на производительность на Chrome/Mac тоже (это, кажется, «OK» для меня) ..

Любая помощь/критика/намек ценится.

Вот код, который перемещает страницы (см скрипку для всего кода)

function startMove() { 
    $('#flipwrap.movable').on('mousemove', function(e) { 
     e.preventDefault(); 
     thisX = parseFloat((e.pageX - offsetX - 190), 10); 
     thisY = parseFloat((e.pageY - offsetY - 270), 10); 
     positionX = parseFloat((((thisX - 55) * -1) + 310), 10); 
     positionY = parseFloat(((thisY + 100)/10), 10); 
     rotateZ = parseFloat((((positionX - 350) * positionY)/900).toFixed(2) * -1, 10); 

     if ($('.page.flipit').hasClass('movable')) { 
      $('.page.flipit').stop(true, true); 
      $('.page.removeit').stop(true, true); 
      $('.page.flipit').removeClass('css-animation').css({ 
       width: 116 - thisX/2.1, 
       height: 345 - thisX/8, 
       top: -13 + thisX/16, 
       left: thisX + 155 
      }); 
      $('.page.flipit').css('-webkit-transform', 'rotate(' + rotateZ + 'deg) ').css('-o-transform', 'rotate(' + rotateZ + 'deg) ').css('-moz-transform', 'rotate(' + rotateZ + 'deg) '); 
      console.log(' pX = ' + positionX + ' pY = ' + positionY + ' rZ = ' + rotateZ + ' tX = ' + thisX + ' tY = ' + thisY); 
      $('.page.removeit').css({ 
       width: 40 + thisX/1.6 
      }); 
     } 
    }); 
} 

Answer 1

MouseMove называется десятки/hunderds раз каждый раз, когда вы перемещаете мышь, кэшировать селекторы, т.е.

$('#flipwrap.movable').on('mousemove', function(e) {} 
    var pageFlipIt = $('.page.flipit'); 
    $('#flipwrap.movable').on('mousemove', function(e) { 
    pageFlipIt.doStuff(); 
    }) 
}) 

Но самая большая проблема заключается в том, что анимация коробочных теней и пограничных радиусов достаточно интенсивна для процессора. Я попытался удалить все из них в jsfiddle, и это было гладко, как масло в Opera, но, конечно, это уберет всю прелесть вашей реализации книги.

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

Answer 2

Ну, как @Duopixel сказал кешировать селекторов для начала и связать их. Я бы работал над упрощением математики - там много шагов. Но да, mousemove запускает много событий, и у вас много математики для каждого из них. так что это будет сложно.

Вот мой быстрый удар в этом, надеюсь, что это какое-то использование

function startMove() { 
    var $memoized_page_flipit = $('.page.flipit') 
     , $memoized_page_removeit = $('.page.removeit ') 
     , $memoized_page_stop = $memoized_page_flipit.add($memoized_page_removeit) 
     , offsetThisX = offsetX + 190 //saves an addition at every loop.. 
     , offsetThisY = offsetX + 270 
     , offsetPosX = offsetThisX + 55 + 310 //saves two additions at every loop.. 
     , offsetPosY = (offsetThisY + 100)/10; //saves one addtion every loop 
     , moving = false 

    $('#flipwrap.movable').on('mousemove', function(e) { 
     e.preventDefault(); 

     //tries not to have too many handlers hogging resources 
     if(moving){ 
      return; 
     } 
     moving = true; 

     thisX = e.pageX - offsetThisX; //floats and ints are all Numbers 
     thisY = e.pageY - offsetThisY; 
     positionX = offsetPosX - e.pageX; //swapping order to save the * -1 
     positionY = e.pageY/10 - offsetPosY 

     //make a string only once 
     rotateZ = 'rotate(' + parseFloat((((positionX - 350) * positionY)/900).toFixed(2) * -1, 10) + 'deg)'; 

     if ($memoized_page_flipit.hasClass('movable')) { 
      $memoized_page_stop.stop(true, true); 
      $memoized_page_flipit 
       .removeClass('css-animation') 
       .css({ 
        width: 116 - thisX/2.1, 
        height: 345 - (thisX >> 3),  //bitwise shift division 
        top: -13 + (thisX >> 4) , 
        left: thisX + 155 
        , '-webkit-transform' : rotateZ 
        , '-o-transform' : rotateZ 
        , '-moz-transform' : rotateZ 
       }); 
      $memoized_page_removeit.css({ 
       width: 40 + thisX/1.6 
      }); 
     } 
     moving = false; 
    }); 
}