Skip to content

Instantly share code, notes, and snippets.

@malchata
Last active January 26, 2022 09:44
Show Gist options
  • Save malchata/ba378f4b9d9dbe711e7e95d48732ca05 to your computer and use it in GitHub Desktop.
Save malchata/ba378f4b9d9dbe711e7e95d48732ca05 to your computer and use it in GitHub Desktop.
A super Jerry-rigged way of getting image decode times from traces captured using Puppeteer
// This is Node script that uses Puppeteer (headless Chrome) to measure the decode time
// of a single image injected into a blank HTML document. It uses minimist to take command
// line arguments. Example usage: node measure-image-decode.js https://example.com/example-image.jpg
// This example assumes you're running a local server to grab the blank document.
// Thanks to Paul Irish and Tim Kadlec for their input!
const puppeteer = require("puppeteer");
const argv = require("minimist")(process.argv.slice(2));
async function getDecode(url) {
let tracePath = `./traces/temp.json`;
let blankDocument = "http://localhost:8080/index.html";
let ext = url.split(".").pop();
let pid;
let decodes = [];
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
page.setViewport({
width: 1440,
height: 900
});
await page.waitFor(500);
await page.tracing.start({
path: tracePath
});
await page.goto(blankDocument);
await page.evaluate((imageUrl) => {
return new Promise((resolve, reject) => {
let imageElement = new Image();
imageElement.src = imageUrl;
imageElement.onload = () => {
imageElement.decode().then(() => {
document.body.appendChild(imageElement);
resolve();
});
}
});
}, url);
await page.tracing.stop();
await page.screenshot();
await browser.close();
traces = require(tracePath).traceEvents;
traces.forEach((trace) => {
if(trace.name === "Decode Image" && trace.ph === "B" && trace.args.imageType === ext) {
pid = trace.pid;
decodes.push(trace);
}
if(trace.pid === pid && trace.ph === "E" && trace.name === "Decode Image") {
decodes.push(trace);
}
});
return (decodes[1].ts - decodes[0].ts) / 1000;
}
(async() => {
let url = argv._[0];
let file = url.split("/").pop();
let decode = await getDecode(url);
console.log(`Decode for ${file} took ${decode}ms`);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment