mourner/index.html

## index.html
<!doctype html>
<meta charset="utf-8">
<title>Benchmark</title>
<body></body>
<style>html, body, #map { height: 100%; margin: 0; } </style>

<div id="map"></div>

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
<!-- <script src="mapbox-gl.js"></script> -->
<script>

console.log(mapboxgl.version);

mapboxgl.accessToken = 'pk.eyJ1IjoibW91cm5lciIsImEiOiJWWnRiWG1VIn0.j6eccFHpE3Q04XPLI7JxbA';

var map = new mapboxgl.Map({
    container: document.getElementById('map'),
    style: 'mapbox://styles/mapbox/streets-v9'
});

var from = {
    center: [-77.01866, 38.888],
    zoom: 4
};

var to = {
    center: [-77.01866, 38.888],
    zoom: 18,
    easing: (t) => t,
    duration: 20000
};

map.jumpTo(from);

map.on('load', function () {

    console.log('warmup');

    map.flyTo(to).once('moveend', function () {
        console.log('start');

        setTimeout(function () {
            map.jumpTo(from);
            map.flyTo(to).once('moveend', function () { console.log('end'); });
        }, 1000);
    });
});
</script>

## index.js
const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        args: [
            '--headless'
        ]
    });
    const page = await browser.newPage();
    page.setViewport({width: 1280, height: 720, deviceScaleFactor: 2});

    page.on('console', async (msg) => {
        console.log(msg);
        if (msg === 'start') {
            page.tracing.start({path: 'trace.json'});
        }
        if (msg === 'end') {
            await page.tracing.stop();
            await browser.close();

            const traces = JSON.parse(fs.readFileSync('./trace.json'))
                .traceEvents.filter(t => t.name === 'FireAnimationFrame');

            const durations = [];

            for (let i = 0; i < traces.length; i++) {
                let d = traces[i].dur / 1000;
                if (d > 16) durations.push(d);
            }

            console.log('num: ' + durations.length);
            console.log('percent: ' + (100 * durations.length / traces.length).toFixed(2) + '%');
            console.log('total: ' + durations.reduce((sum, a) => sum + a, 0));
        }
    });

    await page.goto('file://' + __dirname + '/index.html', {waitUntil: 'networkidle'});
})();
	<!doctype html>
	<meta charset="utf-8">
	<title>Benchmark</title>
	<body></body>
	<style>html, body, #map { height: 100%; margin: 0; } </style>

	<div id="map"></div>

	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
	<!-- <script src="mapbox-gl.js"></script> -->
	<script>

	console.log(mapboxgl.version);

	mapboxgl.accessToken = 'pk.eyJ1IjoibW91cm5lciIsImEiOiJWWnRiWG1VIn0.j6eccFHpE3Q04XPLI7JxbA';

	var map = new mapboxgl.Map({
	container: document.getElementById('map'),
	style: 'mapbox://styles/mapbox/streets-v9'
	});

	var from = {
	center: [-77.01866, 38.888],
	zoom: 4
	};

	var to = {
	center: [-77.01866, 38.888],
	zoom: 18,
	easing: (t) => t,
	duration: 20000
	};

	map.jumpTo(from);

	map.on('load', function () {

	console.log('warmup');

	map.flyTo(to).once('moveend', function () {
	console.log('start');

	setTimeout(function () {
	map.jumpTo(from);
	map.flyTo(to).once('moveend', function () { console.log('end'); });
	}, 1000);
	});
	});
	</script>
	const puppeteer = require('puppeteer');
	const fs = require('fs');

	(async () => {
	const browser = await puppeteer.launch({
	headless: false,
	args: [
	'--headless'
	]
	});
	const page = await browser.newPage();
	page.setViewport({width: 1280, height: 720, deviceScaleFactor: 2});

	page.on('console', async (msg) => {
	console.log(msg);
	if (msg === 'start') {
	page.tracing.start({path: 'trace.json'});
	}
	if (msg === 'end') {
	await page.tracing.stop();
	await browser.close();

	const traces = JSON.parse(fs.readFileSync('./trace.json'))
	.traceEvents.filter(t => t.name === 'FireAnimationFrame');

	const durations = [];

	for (let i = 0; i < traces.length; i++) {
	let d = traces[i].dur / 1000;
	if (d > 16) durations.push(d);
	}

	console.log('num: ' + durations.length);
	console.log('percent: ' + (100 * durations.length / traces.length).toFixed(2) + '%');
	console.log('total: ' + durations.reduce((sum, a) => sum + a, 0));
	}
	});

	await page.goto('file://' + __dirname + '/index.html', {waitUntil: 'networkidle'});
	})();