使用requestAnimationFrame进行JavaScript动画的帧率不稳定

Question

对于个人教育，我正在尝试用JavaScript / HTML构建Pong实现。

我一直在阅读rendering performance，但是当我在实践中应用这个理论时，它似乎不足。

根据我的理解，requestAnimationFrame应该为我提供流畅稳定的60 fps动画，给定我的逻辑和后续渲染可以在16 ms的时间范围内完成。在这种情况下，每次迭代需要1到2毫秒，然而，我看到我的帧率在45 fps和75 fps之间跳跃，偶尔产生＆＃34;长帧＆＃34;。

我在Mac Mini（2012年末）的OS X 10.12上运行Chrome。

我尝试过使用画布，我尝试过CSS动画方法，我尝试过上/左方法。我尝试过Safari，我尝试过隐姓埋名。然而，jank仍然存在。

我错过了什么？

供参考，这是我的脚本（在CoffeeScript中）：

class window.PongGame

  @launch: ->
    window.pong = new PongGame()
    pong.start()

  constructor: ->
    @ball_size = 32
    @width = 640
    @height = 480
    @y = @height / 2
    @x = 0
    @yVel = 3
    @xVel = 3
    @ball = document.getElementById("pong_ball")

  start: ->
    requestAnimationFrame => @new_frame()

  new_frame: ->
    @handle_collisions()
    @move_ball()
    @animate()
    requestAnimationFrame => @new_frame()

  handle_collisions: ->
    if (0 <= @x <= @width - @ball_size) is false
      @xVel = -@xVel

    if (0 < @y < @height - @ball_size) is false
      @yVel = -@yVel

  move_ball: ->
    @x += @xVel
    @y += @yVel

  animate: ->
    @ball.setAttribute("style", "transform: translate(#{@x}px, #{@y}px); width: #{@ball_size}px; height: #{@ball_size}px")

Jsfiddle：https://jsfiddle.net/nielsbuus/ptLk3ma0/2/

更新

我在较旧的MacBook Pro（2011）上测试了我的代码，帧速率几乎稳定 - 比我的Mac Mini更接近固定的60 fps。

Answer 1

关于浏览器中的requestAnimationFrame效果，请记住几个有趣的事实......

1. 使用分析器会影响结果。我正在开发基于three.js的WebGL项目，其中集成的FPS计数器报告相对稳定的60fps。但是，如果我激活Chrome的时间轴工具并测量我的帧渲染时间，则时间线会显示应用程序每秒下降4-6帧，即使渲染循环中根本没有代码也是如此。

2. 浏览器管理许多其他活动，它们会影响动画效果。在使用大量内存的长期存在的Firefox实例中运行我的应用程序总是比在新实例中运行它的性能更差。 Chrome中另一个标签页中的流媒体视频会将我的应用的帧速率降低到30 FPS（可能是因为它们都争夺GPU时间）。垃圾收集可能占用帧预算的大量时间，最大限度地减少对象分配，GC是具有大量动画的复杂应用程序的一个重要问题。

3. 特别是，在使用Chrome的时间线工具时，请确保启用JS Profiling，并展开GPU活动频段。您的代码可能在16.6ms帧预算范围内，但在我的系统中，丢帧通常与繁重的GPU活动相关联。

我的建议？不要将探查器的结果视为真实世界性能的绝对或代表，并且使浏览器动画性能变得平静有点过山车:)。

你也可以考虑使用为three.js开发的FPS counter（但可以在我认为的任何地方使用），我认为它比现代浏览器中的重量级分析工具具有更少的扭曲效果。保持它在开发中运行可以在遇到严重的性能问题时提醒您。