Почему jQuery не использует requestAnimationFrame? - PullRequest
Новая
       3

Почему jQuery не использует requestAnimationFrame?

73 голосов
/ 03 ноября 2011

Некоторые браузеры поддерживают requestAnimationFrame, так почему бы не использовать его?В конце концов, он поддерживается со времен Google Chrome 10 .Несмотря на это, jQuery , похоже, не использует его .Я нашел сообщение об ошибке об этом, но никакого реального объяснения не было дано?Я уверен, что у людей jQuery есть свои причины.

Почему бы им не использовать этот потрясающий API?

Ответы [ 3 ]

74 голосов
/ 25 января 2012

В тикете # 9381 вы можете прочитать, почему они прекратили использовать requestionAnimationFrame через некоторое время.

Подводя итог, проблемы заключались в том, что анимации не запускались (браузеры пытаются уменьшить нагрузку на процессор), когда у окна не было фокуса, что нормально, если окно скрыто, но не, если оно видимое, просто вне фокус. Кроме того, очереди анимации накапливались, и после того, как окно вернулось к фокусу, дела пришли в бешенство. Это потребует безобразных изменений в коде и / или изменений в том, как люди добавляют вещи в очередь анимации. Поэтому было решено, что поддержка будет удалена, пока не появится лучший способ сделать это.

12 голосов
/ 04 ноября 2013

Учитывая другие ответы и возражения, я хотел проверить это на простой анимации слайд-шоу:

http://brass9.com/nature

По состоянию на 2013 год возражения в других ответах здесь уже не кажутся существенными. Я добавил

https://github.com/gnarf/jquery-requestAnimationFrame/blob/master/src/jquery.requestAnimationFrame.js

к моему существующему коду анимации и проверил, включен ли он и влияет ли анимация затухания при использовании. Он работает надежно, даже в фоновых окнах, в Chrome 30, IE 11 и FF 24. При тестировании Android 2.3 он, похоже, использует полифилл и работает как положено.

jQuery 3

jQuery 3.0 интегрирует requestAnimationFrame . По сути, jQuery справлялся с этим нормально, но некоторые пользователи вызывали бы .setInterval(function() { tag.animate(, облажаясь. Таким образом пунт к выпуску основной версии. jQuery 3 не поддерживает и никогда не будет поддерживать IE8 и ниже, поэтому, если у вас есть пользователи IE8, придерживайтесь jQuery 1.x.

CSS-переходы

В моем тестировании заявления об экономии ресурсов процессора / батареи requestAnimationFrame являются ложными обещаниями. Я вижу высокую загрузку ЦП, например, при длительном затухании. Что экономит процессор / батарею, так это CSS Transitions , вероятно потому, что браузер, особенно мобильные браузеры, делает гораздо более сильные предположения о том, что вы намереваетесь и о чем еще их спрашивают, а собственный код все еще быстрее чем Javascript + DOM.

Так что, если вы действительно хотите сэкономить процессор / батарею, переходы CSS для вас. IE9 и ниже не могут справиться с ними, и все еще есть много пользователей, поэтому рассмотрим jquery.transit и их откат до animate внизу страницы.

6 голосов
/ 03 ноября 2011

В исходном коде jQuery для v1.6.2 я вижу, что requestAnimationFrame используется, если он присутствует. Я не изучил код очень подробно, чтобы увидеть, что он используется для всего, для чего он может быть использован, но он используется в разделе анимации кода вместо вызова setInterval(). Вот код из 1.6.2: 

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

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

EDIT:

Если вы прочитаете это сообщение в блоге , звучит так, как будто оно было извлечено из 1.6.3 и, возможно, будет возвращено в 1.7, и главная причина, по которой его вытащили, заключается в том, что он сломал некоторые вещи, которые люди «неправильно» использовать очередь анимации для (хотя, возможно, это вопрос мнения).

...