How the duration is measured
This benchmark tries to measure the duration of some table operations in the browser. That means we want to compute the duration starting from the click event until all repainting has finished.
An alternative approach would be to measure just the javascript duration. We're not going this approach since we're interested in the complete client side duration and that includes the duration for rendering.
Let's take a look at the performance tab:
The selection shows what we want: The duration is the timespan from the start of the click to the end of the paint event.
Painting events are colored green. So we're looking for the end of the green bar.
Chrome automation tools like puppeteer, playwright and webdriver can log the same events that the performance tab uses for its display.
The click event is pretty easy to identify and the invariant is that there must be exactly one such event. We're interested in the start timestamp of that event.
Some frameworks will perform the javascript logic during the click event which is the simplest case shown above.
Other frameworks can delay javascript logic and execute them in a request animation frame callback or a timer event like shown here:
Can you spot the problem? There are two green bars. One after the click and the other after the timer. We're interested in the second green bar. So we must choose the paint event after the layout event. The first paint event isn't preceded by a layout event.
Some frameworks make it easy to find the right events and yield one layout and one paint event. Some others don't. This screenshot doesn't look as bad the corresponding events look:
Trace format: https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview?pli=1#heading=h.yr4qxyxotyw