Question

有些浏览器支持requestAnimationFrame，为什么不使用它呢？毕竟，它是supported since Google Chrome 10。尽管如此，jQuery does not seem to be using it。我发现了一个bug report，但没有给出真正的解释？不过，我确信jQuery人有他们的理由。

他们为什么不使用这个很棒的API？

Answer 1

在ticket #9381中，您可以了解他们在一段时间后停止使用requestionAnimationFrame的原因。

总结一下，当窗口没有焦点时，问题是动画没有运行（浏览器尝试减少CPU负载），如果窗口被隐藏则可以，但如果窗口是隐藏的则没有，只是出于焦点。此外，动画队列堆积起来，窗口重新聚焦后，事情变得狂暴起来。这将需要对代码进行丑陋的更改和/或更改人们向动画队列添加内容的方式。所以决定删除支持，直到有更好的方法来做到这一点。

Answer 2

鉴于其他答案和反对意见，我想在一个简单的幻灯片动画上测试一下：

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，它似乎使用了polyfill并按预期工作。

jQuery 3

jQuery 3.0 integrates requestAnimationFrame。基本上，jQuery可以很好地处理它，但有些用户会调用.setInterval(function() { tag.animate(，搞砸了。因此，主要版本发布的平底船。 jQuery 3不会也不会支持IE8及以下版本，所以如果你有IE8用户，请坚持使用jQuery 1.x。

CSS过渡

在我的测试中，requestAnimationFrame的CPU /电池节省声明是虚假承诺。我发现CPU使用率很高，例如长时间衰减。什么节省CPU /电池是CSS Transitions，可能是因为浏览器，特别是移动浏览器，可以对你想要什么以及对它们提出什么要求做出更强有力的假设，本机代码仍然比Javascript +更快DOM。

因此，如果您真的想节省CPU /电池，那么CSS Transitions适合您。 IE9及以下版本无法处理它们，但仍然有大量用户，所以请考虑jquery.transit及其在页面底部的回退到animate。

Answer 3

在v1.6.2的jQuery源代码中，我看到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所以我不知道那个版本。如果它不在那个版本中，那么一定有一些问题因此被删除了。

修改

如果您阅读this blog post，它听起来就像是从1.6.3中退出并且可能会被放回1.7中并且它被拉出的主要原因是因为它打破了人们“错误地”使用的一些东西动画队列（尽管这可能是意见问题）。

为什么jQuery不使用requestAnimationFrame？

3 个答案:

jQuery 3

CSS过渡