Javascript requestAnimationFrame实际上比onScroll慢吗？

我最近读了一些关于requestAnimationFrame的文章，以及它对更平滑地处理滚动事件上的动画的承诺。我特别采用了本文中的方法：

因此，我决定在我正在开发的一个新网站上试用它，虽然Chrome中的一切看起来都很棒，但Firefox和IE中的动画非常不稳定。当我切换回直接从scroll事件处理程序调用我的更新函数时，它实际上会变得更加流畅。所以我很困惑，因为看起来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+'%'
     });
}

---

Requestanimationframe是一个FPS计时问题。它通过将动画与浏览器绘制帧的功能对齐，防止动画丢弃帧。我认为您的问题在于您希望它与用户所做的视觉滚动特别一致。由于您希望图像随滚动条准确移动，因此您希望继续直接使用onScroll。如果您要在屏幕周围设置一系列内容的动画，您可能希望使用requestanimationframe，以便它们与浏览器更新它们的能力保持一致。

我不确定这是否是当前的答案。这也发生在我身上。这并不能解释为什么在chrome中使用rAF是平滑的，但在FF中，它会抖动。在firefox中触发动画帧的逻辑机制似乎与chrome有所不同，并且在检测滚动时，浏览器会以某种方式延迟。