Allow benchmark to run in Safari

Performing teardown in a new frame was causing Safari to hang on the 2nd
benchmark run.

performance/benchmark.js

@@ -6,24 +6,27 @@ const measure = (name, fn) => {
   marky.mark(name);
   fn();
   const performanceMeasure = marky.stop(name);
-  return performanceMeasure;
+  return performanceMeasure.duration;
 };
 
 const benchmark = ({ name, description, setup, teardown, task, runs }) => {
   return new Promise((resolve) => {
-    const performanceMeasures = [];
+    const durations = [];
     let i = 0;
 
+    console.group(`[benchmark] ${name}`);
+    console.log(description);
+
     setup();
     const first = measure('first', task);
     teardown();
 
     const done = () => {
-      const mean = performanceMeasures.reduce((sum, performanceMeasure) => {
-        return sum + performanceMeasure.duration;
+      const mean = durations.reduce((sum, duration) => {
+        return sum + duration;
       }, 0) / runs;
 
-      const firstDuration = fmt(first.duration);
+      const firstDuration = fmt(first);
       const meanDuration = fmt(mean);
 
       console.log(`First: ${firstDuration}`);
@@ -38,8 +41,9 @@ const benchmark = ({ name, description, setup, teardown, task, runs }) => {
     };
 
     const b = () => {
-      performanceMeasures.push(measure('mean', task));
-      window.requestAnimationFrame(c);
+      const duration = measure('mean', task);
+      durations.push(duration);
+      c();
     };
 
     const c = () => {
@@ -56,8 +60,6 @@ const benchmark = ({ name, description, setup, teardown, task, runs }) => {
       }
     };
 
-    console.group(`[benchmark] ${name}`);
-    console.log(description);
     window.requestAnimationFrame(a);
   });
 };

performance/index.js

@@ -8,9 +8,9 @@ const node = document.querySelector('.root');
 const DeepTree = createDeepTree(ReactNative);
 
 Promise.resolve()
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10, registerStyles: false }, node))
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10 }, node))
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10, leafComponent: 'Image' }, node))
-  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20 }, node))
+  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 5, registerStyles: false }, node))
+  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 5 }, node))
+  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 5, leafComponent: 'Image' }, node))
+  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 10 }, node))
   .then(() => ReactDOM.render(<DeepTree breadth={3} depth={5} id={0} wrap={1} />, node));