Add image benchmark

performance/benchmarks/deepTree/createDeepTree.js

@@ -1,6 +1,13 @@
 import React, { Component, PropTypes } from 'react';
 
-const createDeepTree = ({ StyleSheet, View }, options = {}) => {
+/* eslint-disable */
+const base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
+/* eslint-enable */
+
+const createDeepTree = (implementation, options = {}) => {
+  const { Image, StyleSheet, View } = implementation;
+  const TerminalComponent = options.leafComponent ? implementation[options.leafComponent] : View;
+
   class DeepTree extends Component {
     static propTypes = {
       breadth: PropTypes.number.isRequired,
@@ -21,7 +28,8 @@ const createDeepTree = ({ StyleSheet, View }, options = {}) => {
           ]}
         >
           {depth === 0 && (
-            <View
+            <TerminalComponent
+              source={TerminalComponent === Image && { uri: base64Icon }}
               style={[
                 styles.terminal,
                 styles[`terminal${id % 3}`]

performance/benchmarks/deepTree/index.js

@@ -4,15 +4,22 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactNative from 'react-native';
 
-const deepTreeBenchmark = ({ breadth, depth, registerStyles = true, runs, wrap }, node) => () => {
+const deepTreeBenchmark = (config, node) => () => {
+  const { breadth, depth, leafComponent = 'View', registerStyles = true, runs, wrap } = config;
+
   // React Native for Web implementation of the tree
   const DeepTree = createDeepTree(ReactNative, { registerStyles });
 
   const setup = () => {};
   const teardown = () => ReactDOM.unmountComponentAtNode(node);
 
+  let name = `DeepTree: ${leafComponent}`;
+  if (!registerStyles) {
+    name += ' (unregistered styles)';
+  }
+
   return benchmark({
-    name: `DeepTree (${registerStyles ? 'registered' : 'unregistered'}) styles)`,
+    name,
     description: `depth=${depth}, breadth=${breadth}, wrap=${wrap}`,
     runs,
     setup,

performance/index.js

@@ -9,8 +9,8 @@ const DeepTree = createDeepTree(ReactNative);
 
 Promise.resolve()
   .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10, registerStyles: false }, node))
-  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20, 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(() => ReactDOM.render(<DeepTree breadth={3} depth={5} id={0} wrap={1} />, node));