A super Jerry-rigged way of getting image decode times from traces captured using Puppeteer

measure-image-decode.js

// 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`);
})();