Command Line Interface Workflow

TracerBench is most commonly consumed two ways, via CLI and CI. The CLI allows for a developer to quickly run a performance benchmark locally. While leveraging TracerBench in CI, drastically aides in the flagging and prevention of a performance regression within a web application over time. The CLI has two primary workflows:

Compare Workflow

Comparing the performance delta between two builds, control vs experiment (most common workflow). This is executed with the `tracerbench compare` command.

Instrument your web application

// app/router.js | ember example
// adding the following performance markersimport EmberRouter from '@ember/routing/router';
import { schedule } from '@ember/runloop';
import config from './config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
  constructor() {
    super(...arguments);
    performance.mark('startRouting');
    this.on('willTransition', function () {
      performance.mark('willTransition');
    });

    this.on('routeDidChange', () => {
      performance.mark('didTransition');
      schedule('afterRender', renderEnd);
    });
  }
}

// schedule this example renderEnd function which will mark and measure your appfunction renderEnd() {
  performance.mark('renderEnd');
  requestAnimationFrame(function () {
    performance.mark('beforePaint');
    requestAnimationFrame(function () {
      performance.mark('afterPaint');
      performance.measure('document', 'navigationStart', 'domLoading');
      performance.measure('jquery', 'domLoading', 'jqueryLoaded');
      performance.measure('ember', 'jqueryLoaded', 'emberLoaded');
      performance.measure('application', 'emberLoaded', 'startRouting');
      performance.measure('routing', 'startRouting', 'willTransition');
      performance.measure('transition', 'willTransition', 'didTransition');
      performance.measure('render', 'didTransition', 'renderEnd');
      performance.measure('afterRender', 'renderEnd', 'beforePaint');
      performance.measure('paint', 'beforePaint', 'afterPaint');
    });
  });
}

// app/index.html | ember example
// adding the following performance markers
// after loading jquery scriptperformance.mark("jqueryLoaded");
  // after loading vendor scriptif (Ember) performance.mark("emberLoaded");

Run Compare

As a quick basic example, try running an A/A test with tracerbench compare against this instrumented site! (When running compare against identical builds for the control and experiment its called an A/A test).

Done!

Remember this was a basic example, scratching the surface of what TracerBench has to offer! Be sure to review the API docs for tracerbench compare.

# tracerbench/6.0.0 darwin-x64 node-v14.16.0tracerbench compare --controlURL https://www.tracerbench.com --experimentURL https://www.tracerbench.com --markers fetchStart,jqueryLoaded,emberLoaded,startRouting,willTransition,didTransition,renderEnd --headless --report