simple-fps-recorder.ts

export {};

const allCollectedFps: number[][] = [];

function sum(values: number[]) {
  return values.reduce((acc, current) => acc + current, 0);
}

function average(values: number[]): number {
  if (!values.length) {
    return 0;
  }

  return sum(values) / values.length;
}

function getPercentile({
  values,
  percentile,
}: {
  values: number[];
  percentile: number;
}) {
  const bestToWorst = [...values].sort((a, b) => b - a);
  const pIndex = Math.floor((values.length / 100) * percentile);
  return bestToWorst[pIndex];
}

function standardDeviation(values: number[]): number {
  /** https://www.mathsisfun.com/data/standard-deviation-formulas.html
   * 1. Work out the Mean (the simple average of the numbers)
   * 2. Then for each number: subtract the Mean and square the result
   * 3. Then work out the mean of those squared differences.
   * 4. Take the square root of that and we are done! */

  const mean = average(values);
  const squaredDifferences = values.map(value => Math.pow(value - mean, 2));
  const differenceMean = average(squaredDifferences);
  const result = Math.sqrt(differenceMean);
  return result;
}

/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
window.addEventListener('mousedown', function onMouseDown() {
  console.log('starting to record frames');
  const fps: number[] = [];
  let frameId: number | null = null;
  let lastFrameTime: null | number = null;
  function loop() {
    frameId = requestAnimationFrame(now => {
      frameId = null;
      if (!lastFrameTime) {
        lastFrameTime = now;
        loop();
        return;
      }
      const timeSinceLastFrame = now - lastFrameTime;
      const newFps = Math.round(1000 / timeSinceLastFrame);
      lastFrameTime = now;
      fps.push(newFps);
      loop();
    });
  }

  loop();

  setTimeout(() => {
    if (frameId) {
      cancelAnimationFrame(frameId);
      frameId = null;
    }
    allCollectedFps.push(fps);
    console.log({
      'interaction average fps': average(fps),
      results: fps,
      p50: getPercentile({ values: fps, percentile: 50 }),
      p90: getPercentile({ values: fps, percentile: 90 }),
      p95: getPercentile({ values: fps, percentile: 95 }),
      p99: getPercentile({ values: fps, percentile: 99 }),
      'standard deviation': standardDeviation(fps),
    });

    const flattened = allCollectedFps.flat();

    console.log({
      interactionCount: allCollectedFps.length,
      resultCount: flattened.length,
      averageFpsPerInteraction: average(flattened),
      p50: getPercentile({ values: flattened, percentile: 50 }),
      p90: getPercentile({ values: flattened, percentile: 90 }),
      p95: getPercentile({ values: flattened, percentile: 95 }),
      p99: getPercentile({ values: flattened, percentile: 99 }),
      'standard deviation': standardDeviation(flattened),
    });
  }, 1000);
});