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

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

1 голос
/ 23 декабря 2011

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

Просмотрите живите здесь или играть со скрипкой

ВОПРОС:

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

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

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

У меня было несколько тестеров, которые тоже жаловались на производительность на 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
            });
        }
    });
}

Ответы [ 2 ]

0 голосов
/ 24 декабря 2011

Ну, как сказал @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;
    });
}
0 голосов
/ 24 декабря 2011

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

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

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

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

...