Merge pull request #2327 from mapbox/bench-geojson-rendering

Make benchmarks navigable and add fps tests for setData

bench/README.md

@@ -4,6 +4,10 @@ Benchmarks help us catch performance regressions and improve performance.
 
 ## Running a Benchmark
 
+Download the benchmark data
+
+`npm run get-benchmark-data`
+
 Start the benchmark server
 
 ```bash

bench/buffer_benchmark.js → bench/benchmarks/buffer.js

@@ -4,14 +4,14 @@ var VT = require('vector-tile');
 var Protobuf = require('pbf');
 var assert = require('assert');
 
-var WorkerTile = require('../js/source/worker_tile');
-var ajax = require('../js/util/ajax');
-var Style = require('../js/style/style');
-var util = require('../js/util/util');
-var Evented = require('../js/util/evented');
-var config = require('../js/util/config');
-var coordinates = require('./coordinates');
-var formatNumber = require('./format_number');
+var WorkerTile = require('../../js/source/worker_tile');
+var ajax = require('../../js/util/ajax');
+var Style = require('../../js/style/style');
+var util = require('../../js/util/util');
+var Evented = require('../../js/util/evented');
+var config = require('../../js/util/config');
+var coordinates = require('../lib/coordinates');
+var formatNumber = require('../lib/format_number');
 
 var SAMPLE_COUNT = 10;
 

bench/fps_benchmark.js → bench/benchmarks/fps.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var Evented = require('../js/util/evented');
-var util = require('../js/util/util');
-var formatNumber = require('./format_number');
+var Evented = require('../../js/util/evented');
+var util = require('../../js/util/util');
+var formatNumber = require('../lib/format_number');
+var measureFramerate = require('../lib/measure_framerate');
 
 var DURATION_MILLISECONDS = 5 * 1000;
 
@@ -12,7 +13,7 @@ module.exports = function(options) {
     var map = options.createMap({
         width: 1024,
         height: 768,
-        zoom: 15,
+        zoom: 5,
         center: [-77.032194, 38.912753],
         style: 'mapbox://styles/mapbox/bright-v8'
     });
@@ -37,28 +38,5 @@ module.exports = function(options) {
         });
     });
 
-
-    setTimeout(function() {
-        evented.fire('log', {
-            message: 'loading assets',
-            color: 'dark'
-        });
-    }, 0);
-
     return evented;
 };
-
-function measureFramerate(duration, callback) {
-    var startTime = performance.now();
-    var count = 0;
-
-    requestAnimationFrame(function onAnimationFrame() {
-        count++;
-        if (performance.now() < startTime + duration) {
-            requestAnimationFrame(onAnimationFrame);
-        } else {
-            var endTime = performance.now();
-            callback(null, count / (endTime - startTime) * 1000);
-        }
-    });
-}

bench/benchmarks/geojson_setdata_large.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var Evented = require('../../js/util/evented');
+var util = require('../../js/util/util');
+var formatNumber = require('../lib/format_number');
+var setDataPerf = require('../lib/set_data_perf');
+var setupGeoJSONMap = require('../lib/setup_geojson_map');
+
+var featureCollection = require('../data/naturalearth-land.json');
+
+module.exports = function(options) {
+    var evented = util.extend({}, Evented);
+
+    var map = options.createMap({
+        width: 1024,
+        height: 768,
+        zoom: 5,
+        center: [-77.032194, 38.912753],
+        style: 'mapbox://styles/mapbox/bright-v8'
+    });
+
+    map.on('load', function() {
+        map = setupGeoJSONMap(map);
+
+        var source = map.getSource('geojson');
+
+        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});
+        });
+    });
+
+    return evented;
+};

bench/benchmarks/geojson_setdata_small.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var Evented = require('../../js/util/evented');
+var util = require('../../js/util/util');
+var formatNumber = require('../lib/format_number');
+var setDataPerf = require('../lib/set_data_perf');
+var setupGeoJSONMap = require('../lib/setup_geojson_map');
+
+var featureCollection = {
+    'type': 'FeatureCollection',
+    'features': [{
+        'type': 'Feature',
+        'properties': {},
+        'geometry': {
+            'type': 'Point',
+            'coordinates': [ -77.032194, 38.912753 ]
+        }
+    }]
+};
+
+module.exports = function(options) {
+    var evented = util.extend({}, Evented);
+
+    var map = options.createMap({
+        width: 1024,
+        height: 768,
+        zoom: 5,
+        center: [-77.032194, 38.912753],
+        style: 'mapbox://styles/mapbox/bright-v8'
+    });
+
+    map.on('load', function() {
+        map = setupGeoJSONMap(map);
+
+        var source = map.getSource('geojson');
+
+        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});
+        });
+    });
+
+    return evented;
+};

bench/query_box_benchmark.js → bench/benchmarks/query_box.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Evented = require('../js/util/evented');
-var util = require('../js/util/util');
+var Evented = require('../../js/util/evented');
+var util = require('../../js/util/util');
 
 var width = 1024;
 var height = 768;

bench/query_point_benchmark.js → bench/benchmarks/query_point.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Evented = require('../js/util/evented');
-var util = require('../js/util/util');
+var Evented = require('../../js/util/evented');
+var util = require('../../js/util/util');
 
 var width = 1024;
 var height = 768;

bench/data/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

bench/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Mapbox GL JS Buffer Benchmark</title>
+    <title>Mapbox GL JS Benchmarks</title>
 
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,6 +10,14 @@
     <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;
@@ -25,6 +33,7 @@
 </head>
 
 <body class="prose">
+    <div id="benchmarks"></div>
     <div id="logs"></div>
     <div id="map"></div>
     <script src="/bench/index.js"></script>

bench/index.js

@@ -14,12 +14,20 @@ function main() {
     log('dark', 'please keep this window in the foreground and close the debugger');
 
     var benchmarks = {
-        buffer: require('./buffer_benchmark'),
-        fps: require('./fps_benchmark'),
-        'query-point': require('./query_point_benchmark'),
-        'query-box': require('./query_box_benchmark')
+        buffer: require('./benchmarks/buffer'),
+        fps: require('./benchmarks/fps'),
+        'query-point': require('./benchmarks/query_point'),
+        'query-box': require('./benchmarks/query_box'),
+        'geojson-setdata-small': require('./benchmarks/geojson_setdata_small'),
+        'geojson-setdata-large': require('./benchmarks/geojson_setdata_large')
     };
 
+    var benchmarksDiv = document.getElementById('benchmarks');
+
+    Object.keys(benchmarks).forEach(function(id) {
+        benchmarksDiv.innerHTML += '<a href="/bench/' + id + '" class="button">' + id + '</a>';
+    });
+
     var pathnameArray = location.pathname.split('/');
     var benchmarkName = pathnameArray[pathnameArray.length - 1] || pathnameArray[pathnameArray.length - 2];
     var createBenchmark = benchmarks[benchmarkName];

bench/coordinates.js → bench/lib/coordinates.js

@@ -3,7 +3,7 @@
 // This file contains the set of coordinates of tiles used in a "flyTo" from
 // the Mapbox SF office to the Mapbox DC office.
 
-var Coordinate = require('../js/geo/coordinate');
+var Coordinate = require('../../js/geo/coordinate');
 
 module.exports = [
     new Coordinate(5242, 12665, 15),

bench/lib/measure_framerate.js

@@ -0,0 +1,16 @@
+'use strict';
+
+module.exports = function measureFramerate(duration, callback) {
+    var startTime = performance.now();
+    var count = 0;
+
+    requestAnimationFrame(function onAnimationFrame() {
+        count++;
+        if (performance.now() < startTime + duration) {
+            requestAnimationFrame(onAnimationFrame);
+        } else {
+            var endTime = performance.now();
+            callback(null, count / (endTime - startTime) * 1000);
+        }
+    });
+};

bench/lib/set_data_perf.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var NUM_TILES = 6;
+
+module.exports = function(source, numCalls, geojson, cb) {
+    var tileCount = 0;
+    var startTime = null;
+    var times = [];
+
+    source.on('tile.load', function tileCounter() {
+        tileCount++;
+        if (tileCount === NUM_TILES) {
+            tileCount = 0;
+            times.push(performance.now() - startTime);
+
+            if (times.length < numCalls) {
+                startTime = performance.now();
+                source.setData(geojson);
+            } else {
+                var avgTileTime = times.reduce((v, t) => v + t, 0) / times.length;
+                source.off('tile.load', tileCounter);
+                cb(null, avgTileTime);
+            }
+        }
+    });
+
+    startTime = performance.now();
+    source.setData(geojson);
+};

bench/lib/setup_geojson_map.js

@@ -0,0 +1,35 @@
+'use strict';
+
+module.exports = function(map) {
+    map.addSource('geojson', {
+        'type': 'geojson',
+        'data': {
+            'type': 'FeatureCollection',
+            'features': []
+        }
+    });
+
+    map.addLayer({
+        'id': 'geojson-polygon',
+        'source': 'geojson',
+        'type': 'fill',
+        'filter': ['all', ['==', '$type', 'Polygon']],
+        'paint': {
+            'fill-color': '#000000',
+            'fill-opacity': 0.25
+        }
+    });
+
+    map.addLayer({
+        'id': 'geojson-point',
+        'source': 'geojson',
+        'type': 'circle',
+        'filter': ['all', ['==', '$type', 'Point']],
+        'paint': {
+            'circle-radius': 5,
+            'circle-color': '#000000'
+        }
+    });
+
+    return map;
+};

package.json

@@ -67,6 +67,7 @@
   },
   "scripts": {
     "start": "node server.js",
+    "get-benchmark-data": "mkdir -p ./bench/data && curl -s https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson > ./bench/data/naturalearth-land.json",
     "start-docs": "npm run production && npm run docs && jekyll serve -w",
     "lint": "eslint js test bench && documentation --lint",
     "build": "browserify -d js/mapbox-gl.js --standalone mapboxgl > dist/mapbox-gl-dev.js && npm run docs",