Element timing already exposes a renderTime property, which matches the same concept that Event Timing uses for measuring duration.
However, Event Timing does not actually expose the renderTime. Instead, Event Timing using startTime == event.timeStamp, and exposes a duration == (renderTime - startTime), rounded to the nearest 8ms.
Common advice in JS is to: let renderTime = startTime + duration to work around this.
Computing renderTime is useful in order to:
Create User Timings to showcase events from start to end
Group events by animation frame
Unfortunately, the fact that we round duration to 8ms makes this difficult. Because each event may have a unique timeStamp, renderTime can end up with awkward offsets.
See Screenshot, which showcases User Timings of Event Timing (above) and real trace events with accurate times (below):
Notice the staggered end time, and also that the last event appears to end earlier.. because it was rounded down instead of rounded up like the others.
Consider just exposing renderTime to Event Timing. It could still be rounded to 8ms, but it would be the same value for all events which appear in the same paint.
Element timing already exposes a
renderTimeproperty, which matches the same concept that Event Timing uses for measuringduration.However, Event Timing does not actually expose the renderTime. Instead, Event Timing using startTime == event.timeStamp, and exposes a duration == (renderTime - startTime), rounded to the nearest 8ms.
Common advice in JS is to:
let renderTime = startTime + durationto work around this.Computing
renderTimeis useful in order to:Unfortunately, the fact that we round
durationto 8ms makes this difficult. Because each event may have a uniquetimeStamp,renderTimecan end up with awkward offsets.See Screenshot, which showcases User Timings of Event Timing (above) and real trace events with accurate times (below):
Notice the staggered end time, and also that the last event appears to end earlier.. because it was rounded down instead of rounded up like the others.
Consider just exposing
renderTimeto Event Timing. It could still be rounded to 8ms, but it would be the same value for all events which appear in the same paint.