I'm trying to measure the user-perceived latency of an interaction in Chrome. This is the time from hitting a key to the screen being updated. In this example the we're re-rendering a large portion of the screen with new content. There is no network latency involved, we're just updating HTML.
In the below screenshot you can see the Chrome DevTools keydown event, it runs a lot of javascript, and then there's a bunch of painting, compositing etc., and then the keydown event "Response" span ends.
Assuming the horizontal gray lines are vsyncs (does anyone know if these lines are documented anywhere?) where Chrome wrote a new render to the GPU and thus the screen, it seems like the "Response" span the Devtools gives for the keydown event is a good approximation to what I'm trying to measure, as it measures the time from keydown until just after the first grey line after we've finished mutating the DOM.
I've tried various ways to approximate this time in javascript, both using requestAnimationFrame, requestIdleCallback, a setImmediate polyfill with message passing, and a few combinations of the above. It seems like all of them are longer than the pure Javascript time, but mostly they underestimate or overestimate the time to actually update the screen.
Does anyone know of a better way of measuring this time in production? How does the Chrome DevTools metric work? Should I be measuring something else entirely?
