requestAnimationFrame 实际上比 onScroll 慢吗？答案

【问题标题】：Is requestAnimationFrame actually slower than onScroll?requestAnimationFrame 实际上比 onScroll 慢吗？
【发布时间】：2014-03-29 14:43:30
【问题描述】：

我最近阅读了一堆关于 requestAnimationFrame 的内容，它承诺在滚动事件上更流畅地处理动画。我特别采用了这篇文章中的方法：http://www.html5rocks.com/en/tutorials/speed/animations/

所以我决定在我正在开发的一个新网站上尝试一下，虽然 Chrome 中的一切看起来都很棒，但 Firefox 和 IE 中的动画却非常不稳定。当我切换回直接从滚动事件处理程序调用我的更新函数时，它实际上最终变得更加平滑。所以我感到困惑的是，requestAnimationFrame 似乎实际上在减慢我的速度。

这是我的代码，也许我做错了什么？我只是想在用户滚动时更新 div 上的背景位置：

var scrollY = $(window).scrollTop();
var scrollTicking = false;

$(window).on('scroll', function(){
    scrollY = Math.max($(window).scrollTop(), 0);
    requestScrollTick();
});

function requestScrollTick(){
    if(!scrollTicking) {
        requestAnimationFrame(scrollUpdate);
    }
    scrollTicking = true;
}

function scrollUpdate(){
    scrollTicking = false;
    CT.animateFeatureCarousel(scrollY);
}


...
...


animateFeatureCarousel: function(scrollY){
    var $carousel = $('.curated-carousel');

    var scrollStart = $carousel.offset().top;
    var scrollEnd = scrollStart + $carousel.height();
    var scrollDelta = scrollEnd - scrollStart;

    var startTop = 50;
    var endTop = 90;
    var topDelta = (endTop - startTop) / scrollDelta;
    var newTop = (startTop - ((scrollY - scrollStart) * topDelta));

    $carousel.find('.curated-carousel-item.current').css({
    'background-position': 'center '+newTop+'%'
     });
}

【问题讨论】：

标签： javascript performance requestanimationframe

【解决方案1】：

Requestanimationframe 是 FPS 计时问题。它通过将动画与浏览器绘制帧的能力对齐来防止动画丢帧。我认为您的问题是您希望它与用户所做的视觉滚动特别对齐。由于您希望图像与滚动准确地移动，因此您希望继续直接使用 onScroll。如果您要在屏幕上为一堆东西设置动画，您会想要使用 requestanimationframe 以便它们与浏览器更新它们的能力保持一致。

【讨论】：

我不确定这是当前的答案。这也发生在我身上。这并不能解释为什么在 chrome 中使用 rAF 是平滑的，但在 FF 中，它会抖动。触发动画帧的逻辑机制在 Firefox 中似乎与 chrome 有点不同，并且在检测滚动时不知何故被浏览器推迟。