2

I'm trying to measure client-side performance - frame rate / scrolling latency specifically - for my app. I'm wondering if anyone has found a nice way to programmatically capture this type of data? I'm trying to compare the performance across time / changes... iow, has a given change made scrolling smoother?

So far I've been doing the following:
+ start a "timeline" recording (using dev tools' "Timeline" feature / view)
+ run a simple js routine which scrolls down at a fixed rate
+ view / export / analyze Chrome's timeline data

The drawbacks to the above are that the act of scrolling the page with javascript introduces it's own performance cost and that ultimately the data I get from the timeline is... pretty thorough. Ideally, I'd be able to get at some sort of summary data - ex: average, median, 95th pct frame length / durations, and longest frame.

Anyone have any tips on this type of thing?

busticated
  • 2,147
  • 1
  • 20
  • 20
  • 1
    Have you tried to go to: chrome://flags/ and open the flag for: FPS counter - It might be great option to dev mode. – Ido Green Aug 08 '12 at 09:04
  • ah, neat! but i'm not sure I can do programmatically with this info? – busticated Aug 08 '12 at 21:52
  • 1
    Ya... programmatically you want something like: http://www.kaizou.org/2011/06/effectively-measuring-browser-framerate-using-css/ – Ido Green Aug 09 '12 at 06:42

1 Answers1

1

You can programmatically extract FPS data by opening a DevTools window on your DevTools window ("DevTools-On-DevTools"), and then running commands in the Console to extract the data from the DevTools model. This is covered here:

https://stackoverflow.com/a/48081289/1669860

Check out this unrelated answer for more help with "DevTools-On-DevTools":

https://stackoverflow.com/a/48198185/1669860

You might be able to achieve this with Puppeteer, also:

https://github.com/GoogleChrome/puppeteer

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120