Optimize vsync

src/service/fixed-layer.js

@@ -238,7 +238,7 @@ export class FixedLayer {
           }
         });
       },
-    }).catch(error => {
+    }, {}).catch(error => {
       // Fail silently.
       setTimeout(() => {throw error;});
     });

src/service/resources-impl.js

@@ -756,7 +756,7 @@ export class Resources {
                   (newScrollHeight - state./*OK*/scrollHeight));
             }
           },
-        });
+        }, {});
       }
     }
   }

src/service/vsync-impl.js

@@ -69,18 +69,40 @@ export class Vsync {
      */
     this.tasks_ = [];
 
+    /**
+     * Double buffer for tasks.
+     * @private {!Array<!VsyncTaskSpecDef>}
+     */
+    this.nextTasks_ = [];
+
     /**
      * States for tasks in the next frame in the same order.
      * @private {!Array<!VsyncStateDef>}
      */
     this.states_ = [];
 
+    /**
+     * Double buffer for states.
+     * @private {!Array<!VsyncStateDef>}
+     */
+    this.nextStates_ = [];
+
     /**
      * Whether a new animation frame has been scheduled.
      * @private {boolean}
      */
     this.scheduled_ = false;
 
+    /**
+     * @private {?Promise}
+     */
+    this.nextFramePromise_ = null;
+
+    /**
+     * @private {?function()}
+     */
+    this.nextFrameResolver_ = null;
+
     /** @const {!Function} */
     this.boundRunScheduledTasks_ = this.runScheduledTasks_.bind(this);
 
@@ -103,11 +125,11 @@ export class Vsync {
    * will be undefined.
    *
    * @param {!VsyncTaskSpecDef} task
-   * @param {!VsyncStateDef=} opt_state
+   * @param {VsyncStateDef=} opt_state
    */
   run(task, opt_state) {
     this.tasks_.push(task);
-    this.states_.push(opt_state || {});
+    this.states_.push(opt_state);
     this.schedule_();
   }
 
@@ -123,16 +145,12 @@ export class Vsync {
    * @return {!Promise}
    */
   runPromise(task, opt_state) {
-    return new Promise(resolve => {
-      this.run({
-        measure: state => {
-          task.measure(state);
-        },
-        mutate: state => {
-          task.mutate(state);
-          resolve();
-        },
-      }, opt_state);
+    this.run(task, opt_state);
+    if (this.nextFramePromise_) {
+      return this.nextFramePromise_;
+    }
+    return this.nextFramePromise_ = new Promise(resolve => {
+      this.nextFrameResolver_ = resolve;
     });
   }
 
@@ -152,7 +170,10 @@ export class Vsync {
    * @param {function()} mutator
    */
   mutate(mutator) {
-    this.run({mutate: mutator});
+    this.run({
+      measure: undefined,  // For uniform hidden class.
+      mutate: mutator,
+    });
   }
 
   /**
@@ -161,11 +182,9 @@ export class Vsync {
    * @return {!Promise}
    */
   mutatePromise(mutator) {
-    return new Promise(resolve => {
-      this.mutate(() => {
-        mutator();
-        resolve();
-      });
+    return this.runPromise({
+      measure: undefined,
+      mutate: mutator,
     });
   }
 
@@ -174,7 +193,10 @@ export class Vsync {
    * @param {function()} measurer
    */
   measure(measurer) {
-    this.run({measure: measurer});
+    this.run({
+      measure: measurer,
+      mutate: undefined,  // For uniform hidden class.
+    });
   }
 
   /**
@@ -294,11 +316,14 @@ export class Vsync {
    */
   runScheduledTasks_() {
     this.scheduled_ = false;
-    // TODO(malteubl) Avoid array allocation with a double buffer.
     const tasks = this.tasks_;
     const states = this.states_;
-    this.tasks_ = [];
-    this.states_ = [];
+    const resolver = this.nextFrameResolver_;
+    this.nextFrameResolver_ = null;
+    this.nextFramePromise_ = null;
+    // Double buffering
+    this.tasks_ = this.nextTasks_;
+    this.states_ = this.nextStates_;
     for (let i = 0; i < tasks.length; i++) {
       if (tasks[i].measure) {
         tasks[i].measure(states[i]);
@@ -309,6 +334,14 @@ export class Vsync {
         tasks[i].mutate(states[i]);
       }
     }
+    // Swap last arrays into double buffer.
+    this.nextTasks_ = tasks;
+    this.nextStates_ = states;
+    this.nextTasks_.length = 0;
+    this.nextStates_.length = 0;
+    if (resolver) {
+      resolver();
+    }
   }
 
   /**