diff --git a/bench/.eslintrc b/bench/.eslintrc new file mode 100644 index 00000000000..d34a4506724 --- /dev/null +++ b/bench/.eslintrc @@ -0,0 +1,7 @@ +{ + "parserOptions": { + "ecmaFeatures": { + "jsx": true + } + } +} diff --git a/bench/README.md b/bench/README.md index e89e251b1bf..b4224ce9505 100644 --- a/bench/README.md +++ b/bench/README.md @@ -2,7 +2,7 @@ Benchmarks help us catch performance regressions and improve performance. -## Running a Benchmark +## Running Benchmarks Start the benchmark server @@ -10,10 +10,9 @@ Start the benchmark server 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 index aa7a77f6028..2543e082679 100644 --- 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 index d9374342c2c..c3c115ffc10 100644 --- 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 index 0006b23a90b..39a8e3bbfb3 100644 --- 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 index 38906586a03..ee5e09eeea4 100644 --- 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 index 9379f50a617..e2bab94a96d 100644 --- a/bench/benchmarks/query_box.js +++ b/bench/benchmarks/query_box.js @@ -28,7 +28,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() { @@ -36,7 +36,7 @@ module.exports = function(options) { 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 index 49962b633bc..1b3ac282483 100644 --- 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 index 9b346bd4175..fc698ac3d92 100644 --- a/bench/index.html +++ b/bench/index.html @@ -8,34 +8,10 @@ - - -
+ - - diff --git a/bench/index.js b/bench/index.js index 538df4a5a71..95f39df40ef 100644 --- a/bench/index.js +++ b/bench/index.js @@ -1,67 +1,223 @@ 'use strict'; +/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "BenchmarksView|clipboard" }]*/ -var mapboxgl = require('../js/mapbox-gl'); +var React = require('react'); +var ReactDOM = require('react-dom'); var util = require('../js/util/util'); - -try { - main(); -} catch (err) { - log('red', err.toString()); - throw err; -} - -function main() { - log('dark', 'please keep this window in the foreground and close the debugger'); - - var benchmarks = { - buffer: require('./benchmarks/buffer'), - fps: require('./benchmarks/fps'), - 'frame-duration': require('./benchmarks/frame_duration'), - '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 += '' + id + ''; - }); - - var pathnameArray = location.pathname.split('/'); - var benchmarkName = pathnameArray[pathnameArray.length - 1] || pathnameArray[pathnameArray.length - 2]; - var createBenchmark = benchmarks[benchmarkName]; - if (!createBenchmark) throw new Error('unknown benchmark "' + benchmarkName + '"'); - - var benchmark = createBenchmark({ - accessToken: getAccessToken(), - createMap: createMap - }); - - benchmark.on('log', function(event) { - log(event.color || 'blue', event.message); - scrollToBottom(); - }); - - benchmark.on('end', function(event) { - log('green', '' + event.message + ''); - scrollToBottom(); - }); - - benchmark.on('error', function(event) { - log('red', event.error); - scrollToBottom(); - }); +var async = require('async'); +var mapboxgl = require('../js/mapbox-gl'); +var Clipboard = require('clipboard'); +var URL = require('url'); + +var BenchmarksView = React.createClass({ + + render: function() { + return' + message + '