jQuery 动画 scrollTop 与 requestAnimationFrame - 性能答案

【问题标题】：jQuery animate scrollTop vs requestAnimationFrame - PerformancejQuery 动画 scrollTop 与 requestAnimationFrame - 性能
【发布时间】：2013-01-25 01:00:18
【问题描述】：

如果我有一个包含大量图像的页面，其中应用了很多 CSS 效果和 CSS 动画，我是否会通过在 requestAnimationFrame 循环中使用 window.scrollTo 与使用 jQuery 的 $("html").animate({ scrollTop: "x" }) 以编程方式滚动来获得性能提升页面到某个点“x”？

Tl;DR — rAF + window.scrollto() vs .animate({scrollTop: "x"}) 性能

谢谢！

【问题讨论】：

你试过了吗？你看到了什么？
我还没试过。我是 rAF 的新手，我想知道性能提升（如果有的话）是否值得我花时间。
我也很好奇这个！我正在构建一个视差站点，滚动动画有时会非常不稳定。你试过了吗？

标签： javascript jquery performance css requestanimationframe

【解决方案1】：

window.scrollTo() 更快，因为它是原生 JavaScript。任何对 jQuery 的调用都比较慢，因为 $() 和 .animate() 都（可能）比单个 window.scrollTo() 调用花费更多时间。没有时间使用.animate({scrollTop ... 也很浪费，因为您可以只使用$("html").scrollTop()。无论如何，window.scrollTo() 应该比这更快，并且具有跨浏览器兼容的优势。如果您不打算为滚动设置动画，我会说使用它。

免责声明：您可能不会看到太大的性能差异。

【讨论】：

我认为 .animate() 默认为 400 毫秒，没有指定时间。我确信使用原始 js 会产生小的性能提升。我更想知道在 .animate() 上使用 rAF 是否有助于避免卡顿，详见此处html5rocks.com/en/tutorials/speed/rendering