关于请求动画框架的几个问题

Question

我试图建立一个视差网站，这将移动很少的元素，同时滚动网站。但是，我没有使用滚动事件侦听器，而是在阅读了requestAnimationFrame和这段视频之后使用了滚动事件侦听器，后者说滚动监听器有点错误。我的问题是：

1. Chrome看上去相当流畅，但在Firefox中却不太灵光。我在这里做错什么了吗？
2. 我的代码实际上比使用普通滚动事件侦听器占用更多资源吗？每次我玩这个代码的时候我都能听到我的手提电脑风扇在燃烧。

我的文件位于http://www.socialbuzz.com.au/index.html，请滚动到页面底部，查看从javascript操作的元素。

Answer 1

您应该有一个滚动事件触发一个requestAnimationFrame循环。不要让滚动事件本身触发requestAnimationFrame。您应该有类似var滚动=true的内容；在发生这种情况时，运行您的requestAnimationFrame循环，该循环引用滚动事件中的事件数据。你需要揭穿滚动事件，一旦你完成，它是一项繁重的工作，但结果是值得的。希望这能有所帮助。

Answer 2

您不是在执行动画；也就是说，在没有用户交互的情况下，您不会连续地修改图形。您对页面的操作只在用户滚动时发生，并且在用户停止滚动后不再继续。因此，使用requestAnimationFrame没有好处，您应该坚持使用一个简单的事件处理程序。

requestAnimationFrame的目的是为连续动画提供最优的行为，它的任何优点都不适用于这里。如果循环的每一步都以某种方式更新图形，那么循环内不做任何操作的环requestAnimationFrame是完全合适的，但是在这里，当用户不滚动时没有变化，所以循环只会浪费CPU时间。

什么时候应该使用requestAnimationFrame的一个例子是，如果您有一些元素，这些元素在滚动之后故意滞后，过了一会儿就会被捕获。捕获动画应该在从滚动事件处理程序启动的requestAnimationFrame循环中完成，当捕获完成时，该循环应该停止。

Answer 3

我也有过类似的经历，为了增加动画步骤的频率，我和鼠标移动监听器和setInterval玩了很多次之后，我又回到了仅仅使用onscroll，发现在FF10和FF 15上它工作得很好。

也许我的要求和你的不一样--它是一个跟踪滚动条的元素，所以滚动是改变盒子位置的线索。它落后于FF，在FF上表现不佳，但在WebKit和IE上工作得很好。我发现，onscroll在FF上的工作频率不如Chrome/IE上的高。

当我最初尝试这一点时，它会在FF 5或6上。使用鼠标移动侦听器或频繁间隔，我能够增加调用手柄滚动功能的频率--但这实际上使定位看起来更快。仅仅是使用on涡旋似乎正在为我工作的10 ESR和15，也许他们修复了什么。