提高 jQuery 拖动动画的性能

Question

我最近开始了一个新项目，这是一本 CSS3/jQuery 翻书（点击翻页，或点击并拖动右侧页面）。

查看live here 或play with the fiddle

问题：

如何提高页面拖拽速度？

在 Chrome 和 Safari 中似乎还可以，但在 Firefox 中速度较慢/“steppy”，在 Opera 中非常糟糕（在 Mac OS X Snow Leopard 上的最新版本中测试）

顺便说一句..我仍在清理代码/我尝试删除旋转，但它似乎没有改变任何东西。

我也有一些测试人员抱怨 Chrome/mac 上的性能（对我来说似乎“还可以”）..

感谢任何帮助/批评/提示。

这是移动页面的代码（完整代码请参见小提琴）

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 都会被调用数十次/数百次，即

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

但最大的问题是动画盒阴影和边框半径是相当密集的处理器。我尝试在你的 jsfiddle 中删除所有这些，它在 Opera 中就像黄油一样顺利，但当然它会带走你的书实现的所有魅力。

我建议删除所有这些，然后逐步添加它们，看看在哪里可以找到视觉效果和速度之间的权衡。

Answer 2

正如@Duopixel 所说，首先缓存选择器，然后将它们链接起来。我会努力简化数学——那里有很多步骤。但是，是的，mousemove 会触发很多事件，并且每个事件都有很多数学运算。所以会很难。

这是我的快速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;
    });
}