Make benchmark runner able to run multiple benchmarks (#2950)

* Make benchmark runner able to run multiple benchmarks fixes #2405 fixes #2656 fixes #2800 * Update benchmark readme * Switch from "reactify" (deprecated) to "babelify" * Support running a single benchmark
mapbox · Aug 8, 2016 · 53a2460 · 53a2460
1 parent 1c8395a
commit 53a2460
Show file tree

Hide file tree

Showing 13 changed files with 258 additions and 131 deletions.
diff --git a/bench/.eslintrc b/bench/.eslintrc
@@ -0,0 +1,7 @@
+{
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}
diff --git a/bench/README.md b/bench/README.md
@@ -2,18 +2,17 @@
 
 Benchmarks help us catch performance regressions and improve performance.
 
-## Running a Benchmark
+## Running Benchmarks
 
 Start the benchmark server
 
 ```bash
 MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} npm start
 ```
 
-Open a benchmark runner page
+To run all benchmarks, open [the benchmark page, `http://localhost:9966/bench`](http://localhost:9966/bench).
 
- - **buffer benchmark** http://localhost:9966/bench/buffer
- - **fps benchmark** http://localhost:9966/bench/fps
+To run a specific benchmark, append its name to the url, for example [`http://localhost:9966/bench/buffer`](http://localhost:9966/bench/buffer).
 
 ## Writing a Benchmark
 

diff --git a/bench/benchmarks/fps.js b/bench/benchmarks/fps.js
@@ -31,7 +31,7 @@ module.exports = function(options) {
                 evented.fire('error', { error: err });
             } else {
                 evented.fire('end', {
-                    message: formatNumber(fps) + ' frames per second',
+                    message: formatNumber(fps) + ' fps',
                     score: 1 / fps
                 });
             }

diff --git a/bench/benchmarks/frame_duration.js b/bench/benchmarks/frame_duration.js
@@ -30,16 +30,14 @@ module.exports = function(options) {
         measureFrameTime(options, zooms[index], function(err_, result) {
             results[index] = result;
             evented.fire('log', {
-                message: formatNumber(result.sum / result.count * 10) / 10 + ' ms per frame at zoom ' + zooms[index] + '. ' +
-                    formatNumber(result.countAbove16 / result.count * 100) + '% of frames took longer than 16ms.'
+                message: formatNumber(result.sum / result.count * 10) / 10 + ' ms, ' +
+                    formatNumber(result.countAbove16 / result.count * 100) + '% > 16 ms at zoom ' + zooms[index]
             });
             callback();
         });
     }
 
     function done() {
-        document.getElementById('map').remove();
-
         var sum = 0;
         var count = 0;
         var countAbove16 = 0;
@@ -50,7 +48,7 @@ module.exports = function(options) {
             countAbove16 += result.countAbove16;
         }
         evented.fire('end', {
-            message: formatNumber(sum / count * 10) / 10 + ' ms per frame. ' + formatNumber(countAbove16 / count * 100) + '% of frames took longer than 16ms.',
+            message: formatNumber(sum / count * 10) / 10 + ' ms, ' + formatNumber(countAbove16 / count * 100) + '% > 16ms',
             score: sum / count
         });
     }
@@ -96,6 +94,7 @@ function measureFrameTime(options, zoom, callback) {
                 if (frameEnd - start > DURATION_MILLISECONDS) {
                     map.repaint = false;
                     map.remove();
+                    map.getContainer().remove();
                     callback(undefined, {
                         sum: sum,
                         count: count,

diff --git a/bench/benchmarks/geojson_setdata_large.js b/bench/benchmarks/geojson_setdata_large.js
@@ -27,7 +27,7 @@ module.exports = function(options) {
         evented.fire('log', {message: 'loading large feature collection'});
         setDataPerf(source, 50, featureCollection, function(err, ms) {
             if (err) return evented.fire('error', {error: err});
-            evented.fire('end', {message: 'average load time: ' + formatNumber(ms) + ' ms', score: ms});
+            evented.fire('end', {message: formatNumber(ms) + ' ms', score: ms});
         });
     });
 

diff --git a/bench/benchmarks/geojson_setdata_small.js b/bench/benchmarks/geojson_setdata_small.js
@@ -37,7 +37,7 @@ module.exports = function(options) {
         evented.fire('log', {message: 'loading small feature collection'});
         setDataPerf(source, 50, featureCollection, function(err, ms) {
             if (err) return evented.fire('error', {error: err});
-            evented.fire('end', {message: 'average load time: ' + formatNumber(ms) + ' ms', score: ms});
+            evented.fire('end', {message: formatNumber(ms) + ' ms', score: ms});
         });
     });
 

diff --git a/bench/benchmarks/query_box.js b/bench/benchmarks/query_box.js
@@ -28,15 +28,15 @@ module.exports = function(options) {
             center: [-77.032194, 38.912753],
             style: 'mapbox://styles/mapbox/streets-v9'
         });
-        document.getElementById('map').style.display = 'none';
+        map.getContainer().style.display = 'none';
 
         map.on('load', function() {
 
             var zoomSum = 0;
             var zoomCount = 0;
             asyncSeries(numSamples, function(n, callback) {
                 var start = performance.now();
-                map.queryRenderedFeatures();
+                map.queryRenderedFeatures({});
                 var duration = performance.now() - start;
                 sum += duration;
                 count++;
@@ -45,7 +45,7 @@ module.exports = function(options) {
                 callback();
             }, function() {
                 evented.fire('log', {
-                    message: 'zoom ' + zoomLevel + ' average: ' + (zoomSum / zoomCount).toFixed(2) + ' ms'
+                    message: (zoomSum / zoomCount).toFixed(2) + ' ms at zoom ' + zoomLevel
                 });
                 callback();
             });
@@ -80,4 +80,3 @@ function asyncSeries(times, work, callback) {
         callback();
     }
 }
-
diff --git a/bench/benchmarks/query_point.js b/bench/benchmarks/query_point.js
@@ -37,7 +37,7 @@ module.exports = function(options) {
             center: [-77.032194, 38.912753],
             style: 'mapbox://styles/mapbox/streets-v9'
         });
-        document.getElementById('map').style.display = 'none';
+        map.getContainer().style.display = 'none';
 
         map.on('load', function() {
 
@@ -46,7 +46,7 @@ module.exports = function(options) {
             asyncSeries(queryPoints.length, function(n, callback) {
                 var queryPoint = queryPoints[queryPoints.length - n];
                 var start = performance.now();
-                map.queryRenderedFeatures(queryPoint);
+                map.queryRenderedFeatures(queryPoint, {});
                 var duration = performance.now() - start;
                 sum += duration;
                 count++;
@@ -55,7 +55,7 @@ module.exports = function(options) {
                 callback();
             }, function() {
                 evented.fire('log', {
-                    message: 'zoom ' + zoomLevel + ' average: ' + (zoomSum / zoomCount).toFixed(2) + ' ms'
+                    message: (zoomSum / zoomCount).toFixed(2) + ' ms at zoom ' + zoomLevel
                 });
                 callback();
             });
@@ -90,4 +90,3 @@ function asyncSeries(times, work, callback) {
         callback();
     }
 }
-
diff --git a/bench/index.html b/bench/index.html
@@ -8,34 +8,10 @@
 
     <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
     <link rel='stylesheet' href='/dist/mapbox-gl.css'/>
-
-    <style>
-        #benchmarks {
-            width: 100%;
-            margin: 25px auto;
-            text-align: center;
-        }
-        #benchmarks a {
-            margin: 5px;
-        }
-        #logs {
-            margin: 25px auto;
-            width: 600px;
-        }
-        .log {
-            padding: 15px 20px;
-        }
-        #map {
-            margin: 25px auto;
-            display: none;
-        }
-    </style>
 </head>
 
-<body class="prose">
+<body>
     <div id="benchmarks"></div>
-    <div id="logs"></div>
-    <div id="map"></div>
     <script src="/bench/index.js"></script>
 </body>