Some way of getting data out of the FPS/Mem Monitor?

[sebinsua]

trafficstars

It would be nice to be able to log diagnostic information to a remote server if the FPS goes below a particular value.

Would you consider adding a callback argument to both startFPSMonitor and startMemMonitor or perhaps making their rendering logic something that could be swapped out with a metric request, etc?

Also, I was wondering what the difference is between using this and Chrome's built-in FPS tool?

[localvoid]

It would be nice to be able to log diagnostic information to a remote server if the FPS goes below a particular value.

I don't think that algo that is used to measure FPS will be reliable enough for such purpose. It was implemented as a better alternative to monitoring tools that were used in dbmon benchmark.

Would you consider adding a callback argument to both startFPSMonitor and startMemMonitor or perhaps making their rendering logic something that could be swapped out with a metric request, etc?

const alpha = 2 / 121;

function startFPSMonitor(callback) {
  let last = 0;
  let fps = 60;

  function update(now) {
    if (last > 0) {
      fps += alpha * ((1000 / (now - last)) - fps);
    }
    last = now;
    callback(fps);
    requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

function startMemMonitor(callback, timeout) {
  function update() {
    callback(Math.round(performance.memory.usedJSHeapSize / (1024 * 1024)));
    setTimeout(update, timeout);
  }
  update();
}

Also, I was wondering what the difference is between using this and Chrome's built-in FPS tool?

Chrome FPS tool is way much more reliable.

[sebinsua]

I don't think that algo that is used to measure FPS will be reliable enough for such purpose. It was implemented as a better alternative to monitoring tools that were used in dbmon benchmark.

Oh, I see. I wonder what the best way of solving my problem will be then. The problem we have within my current project is that we are about to begin building a trading application using React, with the work distributed across multiple teams with uneven skill sets. We are worried that as the project is scaled up, we will begin to get performance regressions which affect the whole application, and we wish to capture these as early as possible. It's obviously not acceptable to us for prices to render too slowly, etc.

Therefore, I was thinking that we could measure this automatically, and was thinking of ways of doing so. I guess alternatively we could perhaps capture a mixture of performance information (user timings, fps?, etc) when using Cypress or some kind of headless browser.

Have you ever done anything like this before?

[localvoid]

Take a look at this benchmark runner as an example. It runs different tests and collects data from Performance Log.