提高jQuery拖動動畫的性能

Question

我最近開始一個新項目，這是一個CSS3/jQuery翻書（點擊翻頁，或點擊&拖動右頁）。

看到它live here或play with the fiddle

問題：

我怎樣才能提高速度拖動頁面的時候？

似乎在Chrome和Safari確定，但它是在Firefox慢/「steppy」和歌劇

BTW（在上一個Mac OS X雪豹最新版本的測試）..我真的很可怕米仍然清理代碼/我試圖刪除旋轉，但它似乎並沒有改變任何東西。

我有這樣的抱怨在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

鼠標移動被稱爲數十次/ hunderds每次您移動鼠標的代碼，緩存你的選擇，即

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

但是最大的問題是動畫盒陰影和邊框半徑是相當處理器密集型的。我試圖在你的jsfiddle中刪除所有這些文件，並且在Opera中它像黃油一樣流暢，但它當然會帶走你書本實現的所有魅力。

我建議將它們全部刪除，然後逐步添加它們以查看在哪裏可以找到眼睛糖果和速度之間的折中。

Answer 2

那麼@Duopixel說緩存選擇器的一開始，並鏈接它們。我會努力簡化數學 - 那裏有很多步驟。但是，是的，鼠標移動會引發很多事件，並且每個人都有很多數學。所以它會很難。

這裏是我的bash快於它，希望它是一些使用

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; 
    }); 
}