为什么jQuery不使用requestAnimationFrame？

Question

有些浏览器支持requestAnimationFrame,为什么不使用呢？毕竟,它自谷歌Chrome 10以来一直受到支持.尽管如此,jQuery 似乎并没有使用它.我发现了一个关于它的错误报告,但没有给出真正的解释？不过,我确信jQuery人有他们的理由.

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

Answer 1

在#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集成了requestAnimationFrame.基本上,jQuery可以很好地处理它,但有些用户会打电话.setInterval(function() { tag.animate(,搞砸了.因此,主要版本发布的平底船.jQuery 3不会也永远不会支持IE8及以下版本,所以如果你有IE8用户,请坚持使用jQuery 1.x.

CSS过渡

在我的测试中,CPU /节省电池的声明requestAnimationFrame是虚假的承诺.我发现CPU使用率很高,例如长时间衰减.什么节省CPU /电池是CSS转换,可能是因为浏览器,特别是移动浏览器,可以对你想要的内容和其他问题做出更强有力的假设,本机代码仍然比Javascript + DOM更快.

因此,如果您真的想节省CPU /电池,CSS Transitions适合您.IE9及以下版本无法处理它们,并且仍有大量用户,所以请考虑将jquery.transit及其Fallback 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所以我不知道那个版本.如果它不在那个版本中,那么一定有一些问题所以它被删除了.

编辑:

如果你阅读这篇博文,听起来好像它是从1.6.3中退出来的,也许会被放回1.7中,它被拉的主要原因是因为它打破了人们"错误地"使用动画队列的一些事情(虽然也许这是一个意见问题).