Disconnects animation frame from frame rate

src/swf/renderer.js

@@ -748,27 +748,7 @@ function renderStage(stage, ctx, events) {
   var frameCount = 0;
   var frameFPSAverage = new metrics.Average(120);
 
-  (function draw() {
-
-    var now = performance.now();
-    var renderFrame = now >= nextRenderAt;
-
-    if (renderFrame && events.onBeforeFrame) {
-      var e = { cancel: false };
-      events.onBeforeFrame(e);
-      renderFrame = !e.cancel;
-    }
-
-    if (renderFrame && renderDummyBalls) {
-      frameTime = now;
-      nextRenderAt = frameTime + maxDelay;
-
-      renderDummyBalls();
-
-      requestAnimationFrame(draw);
-      return;
-    }
-
+  function drawFrame(renderFrame, frameRequested) {
     sampleStart();
 
     var refreshStage = false;
@@ -794,13 +774,6 @@ function renderStage(stage, ctx, events) {
       var domain = avm2.systemDomain;
 
       if (renderFrame) {
-        frameTime = now;
-        maxDelay = 1000 / stage._frameRate;
-        if (!turboMode.value) {
-          while (nextRenderAt < now) {
-            nextRenderAt += maxDelay;
-          }
-        }
         timelineEnter("EVENTS");
         if (firstRun) {
           // Initial display list is already constructed, skip frame construction phase.
@@ -822,7 +795,8 @@ function renderStage(stage, ctx, events) {
         domain.broadcastMessage("render", "render");
       }
 
-      if (isCanvasVisible(ctx.canvas) && (refreshStage || renderFrame)) {
+      if (isCanvasVisible(ctx.canvas) && (refreshStage || renderFrame) &&
+          frameRequested) {
 
         var invalidPath = null;
 
@@ -866,10 +840,6 @@ function renderStage(stage, ctx, events) {
         ctx.canvas.style.cursor = stage._cursor;
       }
 
-      if (renderFrame && events.onAfterFrame) {
-        events.onAfterFrame();
-      }
-
       if (traceRenderer.value) {
         frameWriter.enter("> Frame Counters");
         for (var name in FrameCounter.counts) {
@@ -887,6 +857,47 @@ function renderStage(stage, ctx, events) {
     }
 
     sampleEnd();
+  }
+
+  var frameRequested = true;
+  var skipNextFrameDraw = false;
+  (function draw() {
+    var now = performance.now();
+    var renderFrame = true;
+    if (events.onBeforeFrame) {
+      var e = { cancel: false };
+      events.onBeforeFrame(e);
+      renderFrame = !e.cancel;
+    }
+
+    frameTime = now;
+    if (renderFrame && renderDummyBalls) {
+      renderDummyBalls();
+      return;
+    }
+
+    drawFrame(renderFrame, frameRequested && !skipNextFrameDraw);
+    frameRequested = false;
+
+    maxDelay = 1000 / stage._frameRate;
+    if (!turboMode.value) {
+      nextRenderAt += maxDelay;
+      skipNextFrameDraw = false;
+      while (nextRenderAt < now) {
+        // skips painting of the very next frame if we are now keeping up
+        skipNextFrameDraw = true;
+        nextRenderAt += maxDelay;
+      }
+      if (skipNextFrameDraw) {
+        traceRenderer.value && appendToFrameTerminal("Skip Frame Draw", "red");
+      }
+    } else {
+      nextRenderAt = now;
+    }
+
+    if (renderFrame && events.onAfterFrame) {
+      events.onAfterFrame();
+    }
 
     if (renderingTerminated) {
       if (events.onTerminated) {
@@ -895,6 +906,19 @@ function renderStage(stage, ctx, events) {
       return;
     }
 
-    requestAnimationFrame(draw);
+    setTimeout(draw, Math.max(0, nextRenderAt - performance.now()));
+  })();
+
+  (function frame() {
+    if (renderingTerminated) {
+      return;
+    }
+
+    if (stage._invalid || stage._mouseMoved) {
+      drawFrame(false, !skipNextFrameDraw);
+    }
+
+    frameRequested = true;
+    requestAnimationFrame(frame);
   })();
 }