[lottie-web-perf] Command line application to measure perf
Uses puppeteer to bring up Chrome headless and then calls lottie-web-perf.html with endpoints for lottie.min.js and the target lottie file. NoTry: true Bug: skia:9187 Change-Id: Ic1f4c9fc1cd68b3f747e58bdbf1ea51387e5e139 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/221717 Commit-Queue: Ravi Mistry <rmistry@google.com> Reviewed-by: Joe Gregorio <jcgregorio@google.com>
This commit is contained in:
Ravi Mistry
Skia Commit-Bot
parent
01c9b89a85
commit
6ac3795ebf
2
tools/lottie-web-perf/.gitignore
vendored
Normal file
2
tools/lottie-web-perf/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/res
|
||||
package-lock.json
|
||||
87
tools/lottie-web-perf/lottie-web-perf.html
Normal file
87
tools/lottie-web-perf/lottie-web-perf.html
Normal file
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Lottie-Web Perf</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/res/lottie.js" type="text/javascript" charset="utf-8"></script>
|
||||
<style type="text/css" media="screen">
|
||||
body,
|
||||
main,
|
||||
.anim {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class=anim></div>
|
||||
</main>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
(function () {
|
||||
const PATH = '/res/lottie.json';
|
||||
const RENDERER = 'svg';
|
||||
const FRAMES = 25;
|
||||
|
||||
// First load the animation with autoplay false. We will control which
|
||||
// frame to seek to and then will measure performance.
|
||||
let anim = lottie.loadAnimation({
|
||||
container: document.querySelector('.anim'),
|
||||
renderer: RENDERER,
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
path: PATH,
|
||||
rendererSettings: {
|
||||
preserveAspectRatio:'xMidYMid meet'
|
||||
},
|
||||
});
|
||||
|
||||
console.log("start")
|
||||
const t_rate = 1.0 / (FRAMES - 1);
|
||||
let time = 0;
|
||||
let max = -1;
|
||||
let min = 1000000000;
|
||||
let seek = 0;
|
||||
let frame = 0;
|
||||
const drawFrame = () => {
|
||||
if (frame >= FRAMES) {
|
||||
console.log("On average, took "+ (time/FRAMES) +" us" );
|
||||
// These are global variables to talk with puppeteer.
|
||||
window._avgFrameTimeUs = time/FRAMES;
|
||||
window._minFrameTimeUs = min;
|
||||
window._maxFrameTimeUs = max;
|
||||
window._lottieWebDone = true;
|
||||
return;
|
||||
}
|
||||
|
||||
let start = window.performance.now();
|
||||
anim.goToAndStop(seek, true /* isFrame */);
|
||||
const t = (window.performance.now() - start) * 1000;
|
||||
|
||||
time += t;
|
||||
console.log("Frame " + frame + " took " + t + " us");
|
||||
console.log("Used seek " + seek);
|
||||
if (t < min) {
|
||||
min = t;
|
||||
}
|
||||
if (t > max) {
|
||||
max = t;
|
||||
}
|
||||
seek += t_rate;
|
||||
frame++;
|
||||
window.requestAnimationFrame(drawFrame);
|
||||
};
|
||||
window.requestAnimationFrame(drawFrame);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
133
tools/lottie-web-perf/lottie-web-perf.js
Normal file
133
tools/lottie-web-perf/lottie-web-perf.js
Normal file
@ -0,0 +1,133 @@
|
||||
/**
|
||||
* Command line application to run Lottie-Web perf on a Lottie file in the
|
||||
* browser and then exporting that result.
|
||||
*
|
||||
*/
|
||||
const puppeteer = require('puppeteer');
|
||||
const express = require('express');
|
||||
const fs = require('fs');
|
||||
const commandLineArgs = require('command-line-args');
|
||||
const commandLineUsage= require('command-line-usage');
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
const opts = [
|
||||
{
|
||||
name: 'input',
|
||||
typeLabel: '{underline file}',
|
||||
description: 'The Lottie JSON file to process.'
|
||||
},
|
||||
{
|
||||
name: 'output',
|
||||
typeLabel: '{underline file}',
|
||||
description: 'The perf file to write. Defaults to perf.json',
|
||||
},
|
||||
{
|
||||
name: 'port',
|
||||
description: 'The port number to use, defaults to 8081.',
|
||||
type: Number,
|
||||
},
|
||||
{
|
||||
name: 'lottie_player',
|
||||
description: 'The path to lottie.min.js, defaults to a local npm install location.',
|
||||
type: String,
|
||||
},
|
||||
{
|
||||
name: 'help',
|
||||
alias: 'h',
|
||||
type: Boolean,
|
||||
description: 'Print this usage guide.'
|
||||
},
|
||||
];
|
||||
|
||||
const usage = [
|
||||
{
|
||||
header: 'Lottie-Web Perf',
|
||||
content: 'Command line application to run Lottie-Web perf.',
|
||||
},
|
||||
{
|
||||
header: 'Options',
|
||||
optionList: opts,
|
||||
},
|
||||
];
|
||||
|
||||
// Parse and validate flags.
|
||||
const options = commandLineArgs(opts);
|
||||
|
||||
if (!options.output) {
|
||||
options.output = 'perf.json';
|
||||
}
|
||||
if (!options.port) {
|
||||
options.port = 8081;
|
||||
}
|
||||
|
||||
if (options.help) {
|
||||
console.log(commandLineUsage(usage));
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
if (!options.input) {
|
||||
console.error('You must supply a Lottie JSON filename.');
|
||||
console.log(commandLineUsage(usage));
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Start up a web server to serve the three files we need.
|
||||
let lottieJS = fs.readFileSync(options.lottie_player, 'utf8');
|
||||
let driverHTML = fs.readFileSync('lottie-web-perf.html', 'utf8');
|
||||
let lottieJSON = fs.readFileSync(options.input, 'utf8');
|
||||
|
||||
const app = express();
|
||||
app.get('/', (req, res) => res.send(driverHTML));
|
||||
app.get('/res/lottie.js', (req, res) => res.send(lottieJS));
|
||||
app.get('/res/lottie.json', (req, res) => res.send(lottieJSON));
|
||||
app.listen(options.port, () => console.log('- Local web server started.'))
|
||||
|
||||
// Utility function.
|
||||
async function wait(ms) {
|
||||
await new Promise(resolve => setTimeout(() => resolve(), ms));
|
||||
return ms;
|
||||
}
|
||||
|
||||
const targetURL = "http://localhost:" + options.port + "/";
|
||||
|
||||
// Drive chrome to load the web page from the server we have running.
|
||||
async function driveBrowser() {
|
||||
console.log('- Launching chrome .');
|
||||
const browser = await puppeteer.launch(
|
||||
{headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']});
|
||||
const page = await browser.newPage();
|
||||
console.log("Loading " + targetURL);
|
||||
try {
|
||||
await page.goto(targetURL, {
|
||||
timeout: 20000,
|
||||
waitUntil: 'networkidle0'
|
||||
});
|
||||
console.log('- Waiting 20s for run to be done.');
|
||||
await page.waitForFunction('window._lottieWebDone === true', {
|
||||
timeout: 20000,
|
||||
});
|
||||
} catch(e) {
|
||||
console.log('Timed out while loading or drawing. Either the JSON file was ' +
|
||||
'too big or hit a bug in the player.', e);
|
||||
await browser.close();
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
// Write results.
|
||||
var extractResults = function() {
|
||||
return {
|
||||
'frame_avg_us': window._avgFrameTimeUs,
|
||||
'frame_max_us': window._maxFrameTimeUs,
|
||||
'frame_min_us': window._minFrameTimeUs,
|
||||
};
|
||||
}
|
||||
var data = await page.evaluate(extractResults);
|
||||
console.log(data)
|
||||
fs.writeFileSync(options.output, JSON.stringify(data), 'utf-8');
|
||||
|
||||
await browser.close();
|
||||
// Need to call exit() because the web server is still running.
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
driveBrowser();
|
||||
10
tools/lottie-web-perf/package.json
Normal file
10
tools/lottie-web-perf/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"command-line-args": "^5.0.2",
|
||||
"command-line-usage": "^5.0.3",
|
||||
"express": "^4.16.3",
|
||||
"lottie-web": "5.2.1",
|
||||
"node-fetch": "^2.2.0",
|
||||
"puppeteer": "~1.17.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user